Sub Selectors
Sub-selectors, also known as combinators, are used to select elements based on their relationship with other elements in the HTML structure.
Descendant Selector ( - Space)
Selects all nested elements inside a parent, regardless of how deep they are.
div p {
color: blue;
}✔ This will select all <p> inside any <div>.
Child Selector (> - Direct Child)
Selects only direct children of an element.
div > p {
color: red;
}✔ This applies to <p> elements that are directly inside a <div>, but not nested deeper.
Adjacent Sibling Selector (+)
Selects the first immediately following sibling.
h1 + p {
color: green;
}✔ This styles only the first <p> immediately after an <h1>.
General Sibling Selector (~)
Selects all following siblings of an element.
h1 ~ p {
font-weight: bold;
}✔ This applies to all <p> elements after an <h1>.
Qus. 1 : Which of the following selector select sibling ?
- E.class
- E~F
- *
- E,F,G
- Selects the first child of an element
- Selects all sibling elements
- Selects the immediately next sibling of an element
- Selects the parent of an element
- Selects all elements
- Selects all siblings after a specified element
- Selects only the first sibling of a specified element
- Selects only the last sibling of a specified element
- ul > li
- ul li
- ul + li
- ul ~ li
- A → 2, B → 1, C → 3, D → 6
- A → 2, B → 1, C → 3, D → 4
- A → 2, B → 5, C → 3, D → 4
- A → 5, B → 1, C → 3, D → 4