Advanced CSS selectors and pseudo-classes

CSS (Cascading Style Sheets) selectors are used to target HTML elements and apply styles to them. With advanced CSS selectors and pseudo-classes, you can target elements based on their attributes, position in the document, and state.

Back to TOC

Table of Contents

1. Introduction
2. Basic CSS Selectors
3. Advanced CSS Selectors
• Descendant Selector
• Child Selector
• Adjacent Sibling Selector
• General Sibling Selector
• Attribute Selector
• not() Selecto
4. Common CSS Pseudo-classes
• :hover Pseudo-class
• :active Pseudo-class
• :focus Pseudo-class
• :nth-child() Pseudo-class
5. Conclusion

•Introduction

CSS (Cascading Style Sheets) is a powerful language for styling web pages. It allows web developers to apply styles to different HTML elements, including text, images, and other types of content. CSS selectors are used to identify which HTML elements to apply styles to. In addition to basic CSS selectors, there are advanced CSS selectors and pseudo-classes that allow for even more precise control over the styling of web pages. In this article, we will discuss some of the most commonly used advanced CSS selectors and pseudo-classes.

•Basic CSS Selectors

Before we dive into advanced CSS selectors, it's important to understand basic CSS selectors. These include:

• Element Selector: Selects all elements of a particular type, such as p for paragraphs or h1 for headings.
• Class Selector: Selects all elements with a specific class attribute, such as .my-class.
• ID Selector: Selects a single element with a specific ID attribute, such as #my-id.
• Universal Selector: Selects all elements, denoted by *.
• Attribute Selector: Selects elements with a specific attribute, such as [type="text"].

•Advanced CSS Selectors

•Descendant Selector

The descendant selector, denoted by a space ( ), selects all elements that are descendants of a particular parent element. For example:

HTML

  
    <div>
    <p>This is a paragraph.</p>
    <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    </ul>
    </div>  
  

CSS

  
  div li {
  color: blue;
}   

This will select all li elements that are descendants of a div element and apply a blue color to them.

•Child Selector

The child selector, denoted by >, selects only the direct children of a parent element. For example:

HTML

  
  <div>
  <p>This is a paragraph.</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</div>  
    

CSS

  
  div > ul {
  background-color: yellow;
}   
    

This will select the ul element that is a direct child of the div element and apply a yellow background color to it.

•Adjacent Sibling Selector

The adjacent sibling selector, denoted by +, selects only the next element that is a sibling of a specified element. For example:

HTML

  
  <ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li class="selected">List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
</ul>  
    

CSS

  
 .selected + li {
  font-weight: bold;
}

This will select the li element that immediately follows the li element with the selected class and apply a bold font weight to it.

•General Sibling Selector

The general sibling selector, denoted by ~, selects all elements that are siblings of a specified element. For example:

HTML

  
  <ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li class="selected">List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
</ul>  
    

CSS

  
 .selected ~ li {
  color: green;
}    

This will select all li elements that come after the li element with the selected class and apply a green color to them.

•Attribute Selector

The attribute selector allows you to select elements based on the presence or value of an attribute. There are several types of attribute selectors, including:

• [attribute]: Selects all elements that have the specified attribute.
• [attribute=value]: Selects all elements that have the specified attribute with a value exactly equal to value.
• [attribute^=value]: Selects all elements that have the specified attribute with a value that begins with value.
• [attribute$=value]: Selects all elements that have the specified attribute with a value that ends with value.
• [attribute*=value]: Selects all elements that have the specified attribute with a value that contains value.

For example:

HTML

  
   <input type="text" placeholder="Enter your name">
 <input type="email" placeholder="Enter your email address">
 <input type="submit" value="Submit">  
    

CSS

  
 input[type="text"] {
  border: 1px solid black;
}

input[type^="email"] {
  background-color: yellow;
}

input[type$="mit"] {
  color: red;
}

input[type*="ub"] {
  font-style: italic;
}    

This will apply different styles to the input elements based on their attributes.

•:not() Selector:

This selector is used to select elements that do not match a specific selector. It uses the :not() pseudo-class and a selector inside parentheses to exclude elements that match the selector. For example, p:not(.intro) will select all p elements that do not have the class intro.

•Common CSS Pseudo-classes

•:hover Pseudo-class

The :hover pseudo-class is used to select and style an element when the user hovers over it with their mouse. For example:

CSS

  
 a:hover {
  color: red;
  text-decoration: underline;
}    

This will apply a red color and underlined text decoration to links when the user hovers over them.

•:active Pseudo-class

The :active pseudo-class is used to select and style an element while it is being activated, such as when a button is clicked. For example:

CSS

  
 button:active {
  background-color: blue;
  color: white;
}    

This will apply a blue background color and white text color to a button while it is being clicked.

•:focus Pseudo-class

The :focus pseudo-class is used to select and style an element that has received focus, such as when a user clicks on a form input field. For example:

CSS

  
input:focus {
  border: 2px solid red;
}    

This will apply a red border to a form input field when it has received focus.

•:nth-child() Pseudo-class

The :nth-child() pseudo-class is used to select and style elements based on their position in a parent element. It takes an argument that can be a number, a formula, or the keywords odd or even. For example:

CSS

  
li:nth-child(2n+1) {
  background-color: gray;
}    

This will apply a gray background color to every other li element, starting with the first one.

•Conclusion

Advanced CSS selectors and pseudo-classes allow web developers to apply more precise and targeted styles to web page elements. By understanding and using these selectors, you can create more visually appealing and dynamic web pages.