# 4 hour remaining topics

### DESCENDANT AND CHILD SELECTORS

### ✅ **1\. Child Selector (**`>`)

* Selects **only the direct child** of an element.
    

#### Syntax:

```bash
div > p
```

#### Meaning:

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

#### Example HTML:

```bash
<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:

```bash
div p
```

#### Meaning:

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

#### Example HTML:

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

💡 In Selenium Java:

```bash
// 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:

```bash
A + B
```

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

#### 🔹 Example:

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

🔹 Selector:

```bash
#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:

```bash
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:

```bash
A ~ B
```

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

#### 🔹 Example:

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

🔹 Selector:

```bash
#username ~ input
```

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

#### 💡 In Selenium Java:

```bash
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:**

```bash
element:nth-child(n)
```

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

---

### 🔹 Example:

```bash
<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>
```

```bash
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:**

```bash
element:nth-of-type(n)
```

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

---

### 🔹 Example:

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

```bash
li:nth-of-type(3)
```

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

## 🧠 Advanced Usage:

| Selector | Meaning |
| --- | --- |
| `li:nth-child(odd)` | Selects all odd-numbered children |
| `li:nth-child(even)` | Selects all even-numbered children |
| `li:nth-child(3n)` | Every 3rd child: 3, 6, 9, ... |
| `li:nth-of-type(2n+1)` | Every odd `<li>` element (of that type) |

💡 In Selenium Java:

```bash
// 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)"));
```

---

```bash
// 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 &lt;ul&gt; ?

Ans.

```bash
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:

| Selector | Operator | Matches |
| --- | --- | --- |
| `^=` | Starts with | Beginning of the attribute value |
| `$=` | Ends with | End of the attribute value |
| `*=` | Contains | Any part of the attribute value |

* ### ✅ 1. **Starts with (**`^=`)
    
    #### 🔹 Syntax:
    
    a\[id^='prefix\_'\]
    
* #### 🔹 Meaning:
    
    Selects all `<a>` elements where the `id` **starts with** `prefix_`.
    
* 🔹 Example HTML:
    

```bash
<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:

```bash
a[id$='_suffix']
```

#### 🔹 Meaning:

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

#### 🔹 Example HTML:

```bash
<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:

```bash
a[class*='logo_']
```

#### 🔹 Meaning:

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

#### 🔹 Example HTML:

```bash
<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:

```bash
// 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_']"));
```