CSS Selectors Made Easy ✨

Ever found yourself tangled in the intricate world of CSS? 🕸️ Creating endless classes to style your elements and then losing track in the chaos? Believe me, I’ve been there too—and sometimes, I still am. But discovering some powerful CSS selectors has made styling much more manageable for me. 💡

In this post, I’m excited to share some incredibly useful CSS selectors that will make your code not only more readable but also more efficient. Let’s dive in and simplify our CSS journey together! 🚀

Attribute selectors

Let’s explore some attribute selectors that make styling your links a breeze! 🔗

• [attribute]: selects elements with a specified attribute.

• [attribute=value]: selects elements with a specific attribute value.

• [attribute^=value]: selects elements whose attribute value starts with a specified value.

• [attribute$=value]: selects elements whose attribute value ends with a specified value.

• [attribute*=value]: selects elements whose attribute value contains a specified value anywhere in the attribute value.

• [attribute~=value]: selects elements whose attribute value contains the exact specified value as a space separated value. However, this behavior is not applicable to all attributes. The ~= selector works specifically with attributes that have whitespace-separated lists of values, such as the class attribute.

Some examples:

Pseudo class selectors

• :first-child represents the first element among a group of sibling elements.

  For example,

  

  In this example, :first-child pseudo class selects all the p elements that are the first children within their parent. It seems similar to as first-of-type pseudo class, but the difference is that while first-child would have selected such p elements that were the first child in their parent elements, first-of-type would have selected such p elements that were not necessarily the first p element within their parent but rather were first of their type within their parent regardless of their position among the other children.

  In this scenario,

  

  :first-child applies margin:0 to the paragraph with text 'First paragraph',

  while :first-of-type would have targeted both the paragraphs with 'First paragraph', and 'Second paragraph' text respectively.

  Similarly, you can use last-child and last-of-type for targeting the last child and last child of that type respectively.

  :empty

  :empty selector matches every element that has no children (including text nodes).

  

  Here, the :empty targets all the p elements which have no children (not even text nodes) and sets their display to none. While this may not seem useful but it helps a lot when you are dynamically filling text in an element and till its empty you can set its display to none ensuring that it doesn't take up space or disturb the virtual consistency.

  General Sibling Selector ( ~ )

  The general sibling selector selects all elements that are next siblings of a specified element.

  

  

  Here the ( ~ ) selects all the p elements that are next siblings of the div, that is, the p elements with 'Paragraph 3' and 'Paragraph 4' text.

Adjacent Sibling selector ( + )

The adjacent sibling selector is used to select an element that is directly after another specific element.

The Sibling elements must have the same parent element, and should immediately follow the specified element.

Here, the styling will be applied to the p element with the text "Paragraph 3".

:not(selector)

The :not(selector) selector matches every element that is NOT the specified element.

Here, the specified color is applied to all the elements except the p elements.

:is ()

The :is() pseudo class function takes as its argument a selector list, and selects any element that can be selected by one of the selectors in that list.

For example,

Well, that's a wrap. Mastering CSS selectors empowers you to create precise, efficient, and maintainable stylesheets. Happy styling! 🎨✨