CSS offers a wide range of tools that help developers create visually appealing and interactive websites. Pseudo-classes and selectors are two such tools that can be used to target specific elements on a web page. In this blog, we'll dive into some of the rarely used but powerful pseudo-classes and selectors in CSS. You'll learn how to use these selectors to achieve unique and interesting effects on your website. From targeting elements based on their position in the document to styling form elements based on their validation status, these selectors can take your CSS skills to the next level. Whether you're a beginner or an experienced web developer, this blog has something for everyone who wants to explore the full potential of CSS.

What are Pseudo-Classes and Pseudo-Selectors?

In CSS, a pseudo-class is a keyword added to a selector that specifies a special state of the selected element. This state can be based on user interaction with the element, such as hovering or clicking, or based on the element's location in the document tree. Examples of commonly used pseudo-classes include :hover, :active, and :focus.

On the other hand, a pseudo-selector is a keyword added to a selector that targets a specific part of the selected element. This can be the first letter of a block-level element or the content before or after an element. Examples of commonly used pseudo-selectors include ::before, ::after, and ::first-line.

Differences Between Pseudo-Classes and Pseudo-Selectors

The primary difference between pseudo-classes and pseudo-selectors is that pseudo-classes target specific states of an element, while pseudo-selectors target specific parts of an element. Pseudo-classes are often used to create dynamic and interactive effects, while pseudo-selectors are used for styling purposes, such as adding decorative elements or icons to a website.

10 Rarely Used Pseudo-Classes and Selectors

1. :read-only - Targets form elements that are read-only. This pseudo-class can be used to style input fields or text areas that users cannot edit.

    <input type="text" readonly>
   

    /* Style the read-only input field */
    input:read-only {
      background-color: #f2f2f2;
      color: #999;
    }
   

2. :not() - Targets all elements that do not match the specified selector.

    <div class="container">
      <p>Some text here.</p>
      <h1>Heading</h1>
      <p>Some more text here.</p>
    </div>
   

    /* Style all paragraphs that are not the first child of the container */
    .container p:not(:first-child) {
      font-style: italic;
    }
   

3. :nth-child() - Targets elements based on their position in a parent element.

    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
   

    /* Style every other list item */
    li:nth-child(even) {
      background-color: #f2f2f2;
    }
   

4. :nth-of-type() - Targets elements of a specific type based on their position in a parent element.

    <div>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <span>Span 1</span>
      <p>Paragraph 3</p>
      <span>Span 2</span>
    </div>
   

    /* Style every second paragraph */
    p:nth-of-type(2n) {
      font-weight: bold;
    }
   

5. :target - Targets the element with a specified ID that is currently being targeted by the URL.

    <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
      <li><a href="#section3">Section 3</a></li>
    </ul>
   
    <div id="section1">
      <h2>Section 1</h2>
      <p>Some text here.</p>
    </div>
   
    <div id="section2">
      <h2>Section 2</h2>
      <p>Some more text here.</p>
    </div>
   
    <div id="section3">
      <h2>Section 3</h2>
      <p>Even more text here.</p>
    </div>
   

    /* Style the targeted section */
    :target {
      background-color: #f2f2f2;
    }
   

6. :valid - Targets form elements that are valid based on their required attributes and validation constraints.

    <form>
      <input type="email" required>
      <input type="submit" value="Submit">
    </form>
   

    /* Style the valid email input field */
    input:valid {
      border-color: green;
    }
   

7. :invalid - Targets form elements that are invalid based on their required attributes and validation constraints.

    <form>
      <input type="email" required>
      <input type="submit" value="Submit">
    </form>
   

    /* Style the invalid email input field */
    input:invalid {
      border-color: red;
    }
   

8. :default - Targets form elements that are the default value.

    <form>
      <input type="text" value="Default value">
      <input type="submit" value="Submit">
    </form>
   

    /* Style the default input field */
    input:default {
      background-color: #f2f2f2;
    }
   

9. :required - Targets form elements that have the required attribute.

    <form>
      <input type="text" required>
      <input type="submit" value="Submit">
    </form>
   

    /* Style the required input field */
    input:required {
      border-color: blue;
    }
   

10. :out-of-range - Targets form elements that are out of range based on their min and max attributes.

    <form>
      <input type="number" min="1" max="10">
      <input type="submit" value="Submit">
    </form>
    

    /* Style the out-of-range input field */
    input:out-of-range {
      border-color: red;
    }
    

    Conclusion

    Pseudo-classes and selectors are powerful tools that can help you create more dynamic and interactive websites. While some of them are commonly used, there are many that are rarely used but can help you achieve unique and interesting effects on your website. By exploring these rarely used pseudo-classes and selectors, you can take your CSS skills to the next level and create more engaging and visually appealing websites.