A Complete Guide to CSS Selectors Pt.1

Most of you who are reading this blog and this article are probably already familiar with CSS selectors. At least some of them. However most people I talked with know only the basic ones that are easy to remember and forgot about the more advanced. Paradox is that with use of these more advanced selectors you can do things that looks almost like magic. You don’t have to be a “geeky” type to like the feeling when people just can understand how you did something. Another advantage of using more advanced selectors will lower the need to overwhelm your HTML code with classes. Let’s discuss all selectors we are available in our CSS stylesheets.

Series continues in part 2.

Basic CSS selectors

To start we will look at the easier selectors first and then switch to the more advanced ones.

*

This is a “universal selector” and it is used to target all elements no matter their type or name. Try to use this selector as little as possible. It impact the load time of your pages.

Example:

* {
  margin: 0;
  padding: 0;
}

You can also use this selector to select elements only in some part of page. This will select all elements inside the nav class.

Example:

.nav * {
  margin-left: 1em;
}

#

“ID” is selector you first need to include into your HTML and then you can target any element via this id. Id selectors are allowed to be used only once across your HTML, but it is a good habit to avoid using them completely.
HTML:

Example:

<div id="wrapper"></div>

Example:

#wrapper {
  margin: 0 auto;
  width: 1200px;
}

.

Dot is a symbol for “class” selector. As id, you need to assign class to some element in your HTML to make it work. Compare to id’s, classes allow you to reuse them as many times as you want.

Example:

<p class="big">De probant ex nostrud.</p>

<p> Cernantur aliqua nisi laborum enim.</p>

<p class="big">E quis ea ingeniis, aliquip si minim.</p>

<p>Incididunt quid nisi e fugiat e iis sed nisi officia.</p>

Example:

.big {
  font-size: 1.3em;
  font-weight: bold;
}

element

Element selector simply selects all elements of that name. This will select all paragraphs on the page.

Example:

p {
  color: #a00;
}

Descendent

Through this selector you can make your selection more specific and select elements nested inside other ones. This will select all anchor tags inside list items.

Example:

li a {
  text-decoration: none;
}

>

This will select first element (direct child) inside another one (parent). To select image element inside div:

Example:

div > img {
  width: 100%;
}

+

Adjacent selector selects only element that is immediately after the first one. This will select first h2 that, in HTML, comes right after paragraph.

Example:

<article>
    <h1>Lorem Ipsum</h1>

    <p>...</p>

    <h2>...</h2>
</article>

Example:

p + h2 {
  color: tomato;
}

~

Sibling is similar to “+”, but it is less strict. This will select all h2 that comes after paragraph.

Example:

p ~ h2 {
  color: tomato;
}

These were the basic selectors you probably now. Now let’s see the rest of the band.

Advanced CSS selectors

:link

:visited

The “:link” pseudo-class target all anchors tags which have yet to be clicked on. While the “:visited” target anchor tags which have been already clicked on.

Example:

a:link {
  color: #eee;
}

a:visited {
  color: #c00;
}

[attribute]

Attribute selector target all element that shares the attribute you wrote in your CSS rule.

Example:

a[:title] {
  text-decoration: underline;
}

[attribute="value"]

This will select all elements that have an attribute with specified value. This will select all anchor tags with “#” as href attribute. Remember to wrap the value in quotes.

Example:

a[href="#"] {
  color: green;
}

[attribute~="value"]

This will select all elements which has attribute that contains specified word (value).

Example:

a[title~="code"] {
  font-weight: bold;
}

[attribute|="value"]

This will select all elements which has attribute that starts with specified word (value).

Example:

p[lang|="en"] {
  font-style: italic;
}

[attribute^="value"]

This will select all elements which has attribute that begins with specified word (value). This will select all links starting with “https”.

Example:

a[src^="https"] {
  color: purple;
}

[attribute$="value"]

This will select all elements which has attribute that ends with specified word (value). This will select all png files.

Example:

a[src$=".png"] {
  width: 100%;
}

[attribute*="value"]

This will select all elements which has attribute that contain specified word (value). This will select all anchor tags with Google in the href attribute.

Example:

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

Closing thoughts on CSS selectors

There is a lot of stuff to learn and to remember. Do not be afraid and take it easy and slow. You don’t have to know every existing selector right now, take your time. Once you understand these selectors and invest some of your time in practice, they will become natural for you to use. Today we discussed the basic and few of the more advanced selectors. The rest of selectors will be in Part 2 which will be released soon.

If you liked this article, please subscribe so you don't miss any future post.

Subscribe

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

Become a Patron Donate via Paypal