Top 12 CSS Selectors You Should Know

So you have learned the basic id, class, and descendant selectors—and then called it a day? If so, you're missing out on an enormous level of flexibility. You owe it to yourself to commit these advanced CSS and CSS3 selectors to memory

CSS Rules

Every CSS rule follows this general pattern

selector {
	property : value ;
}

where we have a selector (e.g. h1) and a declaration block ({}) where we declare our styles. In understanding CSS The biggest key player is understanding selectors and how they work, CSS selectors are what allows us to target specific Html Elements and apply styles in the declaration block to them, we won't be focusing on styles right now though, our focus would be on the selecting and what goes in that selector area

Let's get into it 👇

1. Universal Selector

Selects everything

/* Selects all elements */
* {
	color : black ;
}

The CSS universal selector is donated by an asterisk ✳. It selects all elements regardless of their type present on the page. In the example above all elements on the page will get the style of color: black; assuming we don't have any more specific selectors that conflict with that.

2. Element (Type) Selector

/* Selects all img */
img {
	width: 200px;
	height: 100px ;
}

The Element Selector Selects all instances of a tag or element present on the page, in our case, we would be giving all img HTML elements on the page the specified width and height.

3. Class Selector

/* Selects all elements with class of 'blue' */
.blue {
	border: blue 2px dotted ;
	background-color: white;
	color: blue;
}

The CSS class selector is probably the most useful and versatile selector, it selects all elements that have given the class value in their class attribute. In the example above it will select all elements that have the "blue" value in their class attribute

4. ID Selector

/* Selects the element with the id attribute set to '#header' */
#header {
	border: blue 2px dotted ;
	width: 200px;
	height: 100px ;
}

Next, we have the ID selector. ID selectors are the most powerful in terms of CSS specificity, just like the class selector, it targets specific elements in our markup, that we can then reference in our CSS.

Note: The value of an element's ID must be unique on a web page. It is a violation of the HTML standard to use the value of an ID more than once in the same document tree. id selectors are rigid and don't allow for reuse

5. Selector List

/* Selects all matching elements in the list */
span, div, p {
	text-align: center;
	color: rgb(0, 0, 0)
}

The CSS selector list (,) allows us to select multiple elements with different selectors at once and style them. You have more than one thing which uses the same CSS then the individual selectors can be combined into a selector list so that the rule is applied to all of the individual selectors. This is done by grouping them in a comma-separated list and CSS selects all the matching elements in the list

Note: When you group selectors in this way, if any selector is invalid the whole rule will be ignored.

<h1><u> Combinator Selectors </u></h1>

This final group of selectors combines other selectors in order to target elements within our documents

6. Descendant Combinator

/* Selects all <a>'s that are nested inside an <ul> */
ul a{
	text-decoration: none;
	color: dodgerblue;
}

This selector allows us to select elements that are descendants of some other selector.

we are selecting all <a> nested anywhere within an <ul>, it doesn't have to be the first child or first descendant it can be anywhere nested inside the ul

7. Adjacent Sibling Combinator

/* Selects only <p> tags that are immediately preceded by a <h1> */
h1 + p{
	color: dark-grey;
}

The + combinator selects adjacent element siblings. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each will have dark-grey text.

This means that the second element must directly follow the first, and both share the same parent.

8. (Direct) Child Combinator

/* Selects all <h2> that are direct children of a <div> */
div > h2{
	color: white;
}

The > combinator acts more like the descendant combinator expect that it is more particular and selects direct children of the parent element, in the Example: div > h2 will match all <h2> elements that are nested directly inside of a <div>.

With the descendant combinator we would select any nested child or grandchild of the parent element. But the child combinator > selects only direct children.

Sorry grandchildren only children allowed 😋.

Attribute Selectors

The attribute selectors allow us to select elements based on the presence of a certain attribute on an element:

9. X[href="foo"]

a[href="https://hashnode.com/"] {
  color: blue; 
}

The snippet above will style all anchor tags which link to https://hashnode.com/; they'll receive the blue color. All other anchor tags will remain unaffected.

What if the link does indeed direct to Hashnode, but maybe the path is hashnode.com rather than the full URL?

10. X[href*="foo"]

a[href*="hashnode"] {
   color: blue; 
}

There we go. The star designates that the proceeding value must appear somewhere in the attribute's value

11. X[href^="HTTP"]

a[href^="http"] {
   text-decoration: 1px solid blue;
   padding-left: 10px;
}

the carat symbol ^ designates the beginning of a string. If we want to target all anchor tags that have an href which begins with http, we could use a selector similar to the snippet shown above.

12. X[href$=".jpg"]

a[href$=".jpg"] {
   color: red;
}

the symbol $ refers to the end of a string. In this case, we're searching for all anchors which link to an image—or a URL that ends with .jpg.

Conclusion

Alright coder we have covered quite a bit about CSS selectors! 🎉.

• Universal Selector

• Element (Type) Selector

• Class and ID Selectors

• Combinators

  • Adjacent, Descendant, and Direct Child Combinators

• Attribute Selectors and their variants.

  
  

In the next part of this series, we are going to talk about Pseudo Selectors, a big and widely confusing topic in CSS 🤔.

So what are you waiting for, take this knowledge out there and go write some top-notch CSS styles that will impress your friends.

Enjoyed reading this as much as I enjoyed writing it for you? 😍 . 😃 Buy Me a coffee ☕

Thanks so much for reading! 💖 And keep on coding! 👨‍💻.