CSS selectors are a powerful way to style HTML elements with precision. Let’s dive deeper into some advanced CSS selectors with detailed explanations and practical examples:
1. :not() Selector
The :not() pseudo-class allows you to exclude specific elements from a style rule. This is helpful when you want to apply a style to all elements except those matching a particular selector.
Example Explanation: In the example below, all elements except <p> tags will have a light gray background. The :not(p) selector ensures that <p> elements are excluded from the styling rule.
Css Code
/* Apply background color to all elements that are NOT paragraphs */
:not(p) { background-color: #f2f2f2; }
HTML Code:
<p>This is a paragraph.</p>
<div>This is not a paragraph.</div>
Result:
Only the <div> element will have the light gray background, while the <p> remains unaffected.
2. :nth-child() Selector
The :nth-child() pseudo-class is used to target elements based on their position within their parent’s children. You can specify the position using a number or a formula like 2n (to select every even element) or 2n+1 (for odd elements).
Example Explanation: In the example, the third child element of any parent will have a light gray background. The rule applies regardless of the element type.
Css Code
/* Select the third child element */
:nth-child(3) { background-color: #f2f2f2; }
HTML Code:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Result:
Only the third <li> element (Item 3) will have the specified background color.
3. :nth-last-child() Selector
This works similarly to :nth-child(), but it starts counting from the last child rather than the first.
Example Explanation: In this example, the second-to-last child in any parent will be selected and styled. This is especially useful when you want to apply styles based on reverse order.
Css Code
/* Select the second-to-last child element */
:nth-last-child(2) { background-color: #f2f2f2; }
HTML Code:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Result:
The third <li> (Item 3) will be styled because it is the second-to-last element.
4. :first-child Selector
The :first-child pseudo-class targets the first child of any parent. It is a straightforward way to style the very first element in a list or a group of siblings.
Example Explanation: Here, the first <li> inside the <ul> will be styled with a background color.
Css Code
/* Style the first child element */
:first-child { background-color: #f2f2f2; }
HTML Code:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Result:
The first <li> (Item 1) will receive the background color.
5. :last-child Selector
The :last-child pseudo-class is used to select the last child of a parent. It’s often paired with :first-child to style specific edges of a group.
Example Explanation: The last <li> element in the <ul> will be styled.
Css Code
/* Style the last child element */
:last-child { background-color: #f2f2f2; }
HTML Code:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Result:
The last <li> (Item 3) will have the light gray background.
6. :empty Selector
The :empty pseudo-class selects elements that have no child nodes at all. This includes elements with no text content, child elements, or whitespace.
Example Explanation: The <div> in the example below is empty and will therefore be styled, while the <p> with text remains unaffected.
Css Code
/* Style empty elements */
:empty { background-color: #f2f2f2; }
HTML Code:
<div></div>
<p>This is a paragraph.</p>
Result:
The <div> will receive the background color because it is completely empty.
7. :target Selector
The :target pseudo-class applies styles to elements targeted via a URL fragment identifier (the part of the URL after #).
Example Explanation: When the link is clicked, the <div> with the matching id becomes the target and receives the specified style.
Css Code
/* Highlight the target element */
:target { background-color: #f2f2f2; }
HTML Code:
<a href=”#target”>Go to target</a>
<div id=”target”>This is the target element.</div>
Result:
Clicking the link will highlight the <div> with id=”target”.
8. :checked Selector
The :checked pseudo-class is used to style checkboxes, radio buttons, or other inputs that are selected.
Example Explanation: In the example, any checked checkbox will have a gray outline.
Css Code
/* Style checked checkboxes */
:checked { outline: 2px solid #f2f2f2; }
HTML Code:
<input type=”checkbox” checked>
<input type=”checkbox”>
Result:
The first checkbox will have the specified outline, as it is checked.
9. :enabled Selector
The :enabled pseudo-class selects input elements that are not disabled. It is helpful for styling active form fields.
Example Explanation: In the following example, enabled input fields will have a light gray background, while disabled fields will not.
Css Code
/* Style enabled input fields */
:enabled { background-color: #f2f2f2; }
HTML Code:
<input type=”text”>
<input type=”text” disabled>
Result:
The first input field will be styled because it is enabled, while the second input remains unchanged.