Expanding Your CSS Styles with the :has Selector

CSS, an abbreviation for Cascading Style Sheets, is a powerful technology that allows you to effortlessly style and format web pages, giving them a visually appealing and professional look. Among the many useful features in the CSS specification, the :has selector stands out as a game-changer, opening up incredible possibilities for selecting elements based on their descendants. With this selector, you can unlock new creative opportunities in crafting stunning web designs. So get ready to dive into the world of CSS and unleash your imagination!

1. :has
2. :has(:not())

The :has selector allows you to select elements that contain specific elements within them. This enables you to apply styles or perform actions based on the presence or absence of certain elements, without needing to modify the HTML structure.

Here’s an example to illustrate its usage:

/* Select a list item that contains an anchor element */
li:has(a) {
  /* Apply styles to the list item */
  background-color: yellow;
}

/* Select a paragraph that doesn't contain any images */
p:not(:has(img)) {
  /* Apply styles to the paragraph */
  border: 2px solid red;
}

In the first example, the li:has(a) rule targets all list items that contain an anchor element. The selected list items will have a yellow background color applied to them. This can be useful for highlighting certain navigation items, for example.

The second example demonstrates the inverse usage of the :has selector. The p:not(:has(img)) rule selects paragraphs that do not contain any image elements. These paragraphs will have a red border applied to them, making it easier to identify them.

Another useful application of the :has selector is in combination with other CSS selectors. For instance, you can use it to select elements that have specific descendants with certain attributes.

Let’s take a look at an example:

/* Select a div that contains an input element with a type attribute equal to "checkbox" */
div:has(input[type="checkbox"]) {
  /* Apply styles to the div */
  border: 1px solid blue;
}

In this case, the div:has(input[type="checkbox"]) rule targets all <div> elements that contain an <input> element with a type attribute set to “checkbox”. These selected <div> elements will have a blue border applied to them. This technique can be particularly helpful when you want to style or differentiate specific sections of a form, for example.

The :has selector provides a powerful way to select elements based on their descendants, giving you more flexibility and control over your CSS styling. Take advantage of this feature to enhance the visual presentation and interactivity of your web pages.

Let’s explore the capabilities of :has(:not()) and how it can enhance your CSS styling.

The :has(:not()) selector is an advanced combination of selectors that allows you to select elements based on the presence or absence of specific descendants or attributes. It provides a flexible way to target elements that meet certain criteria, giving you precise control over how styles are applied.

Here’s an example to illustrate its usage:

/* Select a div element that contains a span element, but does not contain any anchor elements */
div:has(span):not(:has(a)) {
  /* Apply styles to the div */
  background-color: lightblue;
}

In this example, the div:has(span):not(:has(a)) rule targets all div elements that contain a span element, but do not contain any a (anchor) elements. The selected div elements will have a light blue background color applied to them. This technique can be helpful when you want to style specific sections on your web page that have a certain combination of elements.

The :has(:not()) selector can also be used with other CSS selectors to create even more complex and precise targeting. Let’s take a look at another example:

/* Select a list item that contains a paragraph element, but does not contain any images or anchor elements */
li:has(p):not(:has(img, a)) {
  /* Apply styles to the list item */
  border: 1px solid red;
}

In this case, the li:has(p):not(:has(img, a)) rule targets all li (list item) elements that contain a p (paragraph) element, but do not contain any img (image) or a tag.

That’s it for now! Feel free to experiment with the :has selector and explore its possibilities to create even more dynamic and engaging web pages.

In conclusion, the :has CSS selector is an exciting addition to the CSS spec, providing a powerful means to select elements based on their descendants. It opens up new possibilities for more flexible and dynamic styling. As browser support improves over time, we can expect the :has selector to become more widely adopted and utilized in the future.