Useful CSS Selectors You Might Not Know

CSS selectors play a crucial role in web development for styling web pages. While many are familiar with the common selectors, there are several less common but very useful ones.

What Are CSS Selectors?

CSS selectors are patterns that help in selecting elements on a web page for styling. They can target elements based on attributes, classes, IDs, and more.

Common CSS Selectors

Here are some commonly used ones:

• Element Selector: Targets all elements of a specific type. For example, to style all <div> elements:

  div {
    border: 1px solid black;
  }

• Class Selector: Selects elements with a particular class. If we have a class "text - large":

  .text - large {
    font-size: 20px;
  }

• ID Selector: Targets an element with a specific ID. For an element with ID "header":

  #header {
    background-color: blue;
  }

• Attribute Selector: Used for elements with specific attribute values. For example, to style all links that are external (using the "rel" attribute):

  a[rel="external"] {
    color: red;
  }

Less Common but Useful CSS Selectors

Child Selector(>)

It targets direct children of an element. For a parent element with class "container":

.container > p {
  margin-left: 10px;
}

Descendant Selector( )

This selects all descendants within an element. If we have a div with ID "main" and want to style all <span> elements inside it:

#main span {
  color: green;
}

Adjacent Sibling Selector(+)

Selects an element that immediately follows another specific element. For example, after an <h3> element, if there's a <p> element:

h3 + p {
  font-weight: bold;
}

General Sibling Selector(~)

Targets elements that are siblings of another element, not necessarily adjacent. If we have a div with class "item" and want to style all following siblings with class "detail":

.item ~ .detail {
  padding-top: 5px;
}

Attribute Selector with Partial Match(^=, $=, *=)

• Starts with (^=): To style all images with sources starting with "https://example.com/images/":

  img[src^="https://example.com/images/"]
  {
    border-radius: 5px;
  }

• Ends with ($=): For all forms with a method ending with "post":

  form[method$="post"] {
    background-color: #f0f0f0;
  }

• Contains (*=): To style all links containing "product" in the href attribute:

  a[href*="product"] {
    text-decoration: underline;
  }

Negation Pseudo - Class(:not())

It selects elements that do not match a certain selector. For example, all elements except those with class "hidden":

:not(.hidden) {
  display: block;
}

Target Pseudo - Class(:target)

When the URL fragment matches an element's ID. For a section with ID "contact" in the URL:

#contact:target {
  background-color: yellow;
}

Language Pseudo - Class(:lang())

Targets elements based on language attributes. For elements with lang="en-US":

:lang(en-US) {
  font-family: Arial, sans - serif;
}

Has Pseudo - Class(:has())

The :has() pseudo - class is used to select elements that contain a specific child or descendant. For example, to style a div that contains an image:

div:has(> img) {
  padding: 10px;
}

Selection Pseudo - Class(::selection)

This pseudo - class allows you to style the part of the text that the user has selected. For example, when a user selects some text within a paragraph:

p::selection {
  background - color: purple;
  color: white;
}

Conclusion

These less common CSS selectors offer additional ways to target and style elements precisely. They can enhance the flexibility and functionality of our CSS code, making it more powerful and efficient in creating visually appealing and well structured web pages.

More information can be found at https://en.kelen.cc/