4 hour remaining topics

DESCENDANT AND CHILD SELECTORS

✅ 1. Child Selector (>)

• Selects only the direct child of an element.

Syntax:

div > p

Meaning:

Select all <p> elements that are immediate children of a <div>.

Example HTML:

<div>
  <p>✅ This will be selected</p>
  <section>
    <p>❌ This will NOT be selected</p>
  </section>
</div>

✅ 2. Descendant Selector (space)

• Selects any level of nested child, not just direct children.

Syntax:

div p

Meaning:

Select all <p> elements that are descendants of a <div>—whether direct or deeply nested.

Example HTML:

<div>
  <p>✅ This will be selected</p>
  <section>
    <p>✅ This will ALSO be selected</p>
  </section>
</div>

💡 In Selenium Java:

// Child selector
WebElement directPara = driver.findElement(By.cssSelector("div > p"));

// Descendant selector
WebElement anyPara = driver.findElement(By.cssSelector("div p"));

Sibling Selector

Sibling selectors are used when you want to select elements that share the same parent and come after a particular element.

There are two main types of sibling selectors:

---

✅ 1. Adjacent Sibling Selector (+)

Selects the element that is immediately next to a given element, and both must share the same parent.

🔹 Syntax:

A + B

This selects element B only if it immediately follows element A and both are under the same parent.

🔹 Example:

<div>
  <label id="username">Username</label>
  <input type="text" name="username" />
  <input type="password" name="password" />
</div>

🔹 Selector:

#username + input

This will select only the first <input> after the label with id="username".

🧠 It will not select the second <input> because it's not immediately adjacent to #username.

💡 In Selenium Java:

WebElement userInput = driver.findElement(By.cssSelector("#username + input"));

✅ 2. General Sibling Selector (~)

Selects all siblings that come after a specified element (not just the immediate one), again with the same parent.

🔹 Syntax:

A ~ B

This selects every B that follows A, sharing the same parent.

🔹 Example:

<div>
  <label id="username">Username</label>
  <input type="text" name="username" />
  <input type="password" name="password" />
</div>

🔹 Selector:

#username ~ input

This will select both <input> elements because they both follow #username in the DOM and share the same parent.

💡 In Selenium Java:

List<WebElement> inputs = driver.findElements(By.cssSelector("#username ~ input"));

⚠️ Important Points:

• Both + and ~ require the elements to be siblings (i.e., children of the same parent).

• If there is no sibling of the given type, the selector matches nothing.

• These are one-directional selectors: they select following siblings only (not preceding).

---

nth-Child Selectors

✅ :nth-child() Selector

🔹 Syntax:

element:nth-child(n)

Selects the element that is the nth child of its parent, regardless of its tag name.

---

🔹 Example:

<ul>
  <li>Item 1</li>      <!-- 1st child -->
  <li>Item 2</li>      <!-- 2nd child -->
  <p>Paragraph</p>     <!-- 3rd child -->
  <li>Item 3</li>      <!-- 4th child -->
</ul>

li:nth-child(2)

✅ Selects the second child of <ul>, only if it is an <li>.

❌ li:nth-child(4) will not select Item 3 — because it's the 4th child, but not the 4th <li>.

---

✅ :nth-of-type() Selector

🔹 Syntax:

element:nth-of-type(n)

Selects the nth element of its type among siblings of the same type.

---

🔹 Example:

<ul>
  <li>Item 1</li>      <!-- 1st <li> -->
  <li>Item 2</li>      <!-- 2nd <li> -->
  <p>Paragraph</p>
  <li>Item 3</li>      <!-- 3rd <li> -->
</ul>

li:nth-of-type(3)

✅ Selects Item 3 because it's the third <li>, regardless of other tags in between.

🧠 Advanced Usage:

💡 In Selenium Java:

// Select 2nd <li> child
WebElement secondChild = driver.findElement(By.cssSelector("li:nth-child(2)"));

// Select 2nd <li> of its type
WebElement secondOfType = driver.findElement(By.cssSelector("li:nth-of-type(2)"));

---

// Select 2nd <li> child
WebElement secondChild = driver.findElement(By.cssSelector("li:nth-child(2)"));

// Select 2nd <li> of its type
WebElement secondOfType = driver.findElement(By.cssSelector("li:nth-of-type(2)"));

In this code , how will it come to know that they are the children of <ul> ?

Ans.

WebElement secondChild = driver.findElement(By.cssSelector("ul > li:nth-child(2)"));

✂️ Partial Attribute Match Selectors (Substring Matching)

These allow you to match only part of an attribute's value using special operators:

• ✅ 1. Starts with (^=)

  🔹 Syntax:

  a[id^='prefix_']

• 🔹 Meaning:

  Selects all <a> elements where the id starts with prefix_.

• 🔹 Example HTML:

<a id="prefix_home">Home</a>
<a id="prefix_about">About</a>
<a id="nav_contact">Contact</a>

✅ Selector a[id^='prefix_'] will match:

• <a id="prefix_home">

• <a id="prefix_about">

❌ Will NOT match:

• <a id="nav_contact"> (doesn’t start with prefix_)

---

✅ 2. Ends with ($=)

🔹 Syntax:

a[id$='_suffix']

🔹 Meaning:

Selects all <a> elements where the id ends with _suffix.

🔹 Example HTML:

<a id="link_suffix">Link</a>
<a id="nav_suffix">Nav</a>
<a id="footer_end">Footer</a>

✅ Matches:

• <a id="link_suffix">

• <a id="nav_suffix">

❌ Doesn’t match:

• <a id="footer_end">

---

✅ 3. Contains (*=)

🔹 Syntax:

a[class*='logo_']

🔹 Meaning:

Selects all <a> elements whose class contains the substring logo_ anywhere.

🔹 Example HTML:

<a class="main_logo_block">Logo</a>
<a class="footer_logo_right">Logo</a>
<a class="icon_link">Icon</a>

✅ Matches:

• <a class="main_logo_block">

• <a class="footer_logo_right">

❌ Doesn’t match:

• <a class="icon_link">

---

💡 In Selenium Java:

// Starts with
WebElement startMatch = driver.findElement(By.cssSelector("a[id^='prefix_']"));

// Ends with
WebElement endMatch = driver.findElement(By.cssSelector("a[id$='_suffix']"));

// Contains
WebElement containsMatch = driver.findElement(By.cssSelector("a[class*='logo_']"));