Selector in CSS

CSS selectors select HTML element(s) so that you could style them by applying a specific set of CSS rules. A basic understanding of how selector works can phenomenally help you in designing the web. Here are some selectors that you need to know.

1. Type Selector

It is also referred to as a tag or element selector because it selects the tag or element present in your HTML document.

p { color: red; }

Now, all the paragraph present in your HTML document will be red in color.

2. Universal selector

Universal selector is represented by the asterisk (*) sign. It selects everything in our document. Following code will select all the element inside div element and change the color to blue.

div * { color: blue; }

One main use case of a universal selector is to set the margin and padding of all elements to 0.

* {
  margin: 0;
  padding: 0;
}

3. Class selector

Unlike Type Selector, we start Class Selector with a dot (.) sign.

.honey { background-color: red; }

This will select all the element with class name honey and set background color to red. We can have multiple elements with same class name in the document.

4. ID Selector

ID Selector starts with a # sign.

#heading { border: 1px solid red; }

An element with ID heading will be selected and border will be applied.

One thing to note though, our document can't have multiple elements with same ID.

Applying the same ID to multiple elements will make our HTML invalid hence should be avoided.

5. Attribute Selector

a. [attr]

a[target] {background: gray;}

This will select every anchor tags that have a target attribute.

<a href="https://twitter.com/home">Twitter</a>
<a href="https://letslearn.hashnode.dev/" target="_blank">Hashnode</a>

Guess, what will happen? Yes, you are right - anchor tag with Hashnode will have gray background as it contains target attribute.

FYI _blank attribute value opens the link in new tab on click.

b. [attr=value]

p[class="red"] {
      color: red;
}

Selects the p tag whose attibute value is exactly the value inside the string and will set the color to red.

c. [attr~=value]

h2[class~="heading"] {
  background: green;
}

Selects the h2 tag whose value is exactly the attribute value or the value is space-separated values.

Here is the codepen attached to understand it easily.

https://codepen.io/keeran-raaj/pen/wvrPqmp

Did you notice the difference between using [attr=value] and [attr~=value]?

[attr=value] does not support space-separated values whereas [attr~=value] supports space-separated values.

d. [attr^=value]

^ symbol means starts with. Let us take an example

a[href^="https"] { color: pink;}

It will select all the anchor tag which starts with https.

<a href="#">link</a>
<a href="https://www.youtube.com/">Youtube</a>
<a href="https://www.google.com/">Google</a>

Last two will only be selected as they start with https.

e. [attr$=value]

$ symbol means ends with. Let us take an example

a[href$="pdf"] { background-color: yellow;}

It will select all the anchor tag that ends with .pdf and set the background to yellow.

<a href="xyz.pdf">link</a>
<a href="abc.pdf">link</a>

f. [attr*=value]

* represents that the attribute value contains this value somewhere in it.

<ul>
    <li class="a">Item 1</li>
    <li class="ab">Item 2</li>
    <li class="bca">Item 3</li>
    <li class="bcabc">Item 4</li>
</ul>

li[class*="a"] {
    color: green;
}

All li items will be green in color as every li item contains a somewhere in it.

Besides these selectors, there are other bunch of selectors as well. I will write about those selectors in my next article.

Until then, keep yourself busy and learn about selectors by playing this awesome game.

References

MDN
Tutsplus

If you like you can follow me on LinkedIn and Twitter. Suggestions are welcome.

Raj's Blog