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.
10. :focus Selector
The :focus pseudo-class targets elements that are currently focused, such as when a user clicks or tabs into an input field. This is often used for improving form accessibility and user interaction.
Example Explanation: When a user clicks or tabs into the input field, it changes the background color to light gray.
/*CSS Code*/
/* Style focused elements */
:focus { background-color: #f2f2f2; }
<!--HTML Code:-->
<input type="text" placeholder="Type here...">
Result:
When you click inside the input box, it will highlight, indicating that the element is active or ready for input.
11. :disabled Selector
The :disabled pseudo-class is used to style elements that are disabled and cannot be interacted with. It’s particularly useful for form design when you want to visually indicate non-editable fields.
Example Explanation: The disabled input field below will appear grayed out to signal its inactive state.
/*CSS Code*/
/* Style disabled inputs */
:disabled { background-color: #ddd; }
<!--HTML Code:-->
<input type="text" disabled>
Result:
The disabled input field will appear dimmed, showing users that it’s not available for editing.
12. ::before and ::after Selectors
The ::before and ::after pseudo-elements allow you to insert content before or after an element’s content without modifying HTML. These are often used for icons, decorative elements, or tooltips.
Example Explanation: In the example below, a decorative symbol is added before each paragraph.
/*CSS Code*/
/* Add symbol before paragraph text */
p::before { content: "★ "; color: gray; }
<!--HTML Code:-->
<p>This is an important note.</p>
Result:
A gray star will appear before the paragraph text, enhancing visual presentation.
13. Attribute Selectors
Attribute selectors let you style elements based on the presence or value of specific attributes, offering fine-grained control.
Example Explanation: The [type="text"] selector targets all input elements with the type="text" attribute.
/*CSS Code*/
/* Style text input fields */
input[type="text"] { border: 2px solid #f2f2f2; }
<!--HTML Code:-->
<input type="text" placeholder="Your Name">
<input type="email" placeholder="Your Email">
Result:
Only the text input will get the border style.
By mastering these advanced selectors, you can achieve precision styling without relying on extra classes or JavaScript. They help you write cleaner, more efficient CSS while improving accessibility and design consistency across your website.