Introduction

CSS ( Cascading Style Sheets ) is a language that allows you to describe the styles your markup should have. For a long time, I took CSS for a very simple thing that turns your text to a certain color, adds a little border here, maybe a cute animation here.

Then, I started to meet developers who were really good at CSS, and well, it's a lot more than that... So, I'm spending some time becoming better at it, and we start with the basics.

Selectors

We could style our markup by adding a style attribute to each element:

<p style="color:red;">Paragraph</p>
<span style="color: red; font-size=14px;">Span element</span>

I let you imagine how many different rules you would have to write this way... let alone apply any kind of changes...

In CSS, we can use differents selectors. They allow us to group different elements and apply the same style rules to this group. We will explore:

Element selectors
Class and ID selectors
Attribute selectors

Element selectors

For markup, I will use HTML throughout this article. We can group our styles by elements. Give each element a certain style for example.

The h1 and p tags are grouped and share the same rules. Instead of creating three different rules to style the paragraphs and two rules for my headers, I only make one for each.

You can also group different elements together by separating them with commas in CSS:

See the Pen Element Selectors by Damien Cosset (@Tagada85) on CodePen.

Do not forget the commas in this case! If you do, it won't group the elements, but select the descendents elements.

Class and ID selectors

Classes

To allow more flexibility while selecting your elements, you can specify one or more classes to an element. Each class is space-separated. We use the class attribute.

<p class="danger"></p>
<h1 class="danger title"></h1>

In CSS, you use a period ( . ) to indicate that you are targetting a specific class name. You can chain several classes one after another.

.danger {
 /* Will style the paragraph */
}

.danger.title{
 /* Will style the h1*/
}

Note that the order is not important. If you specify .title.danger, the effect will be the same. It also doesn't need to be an exact match. If you add a third class to your header, it will still follow the rules in the .danger.title block.

See the Pen Class selectors by Damien Cosset (@Tagada85) on CodePen.

ID

ID are very similar to classes. The main differences are that an ID can only be used for one element. An element can only have one ID, because ID can't have space-separated values. ID have more weight than classes. If you have an element with an ID and a class that change the same thing ( the color for example ), the style describe in the ID rules. Finally, ID are targetted by a pound sign ( # ) in a CSS declaration.

See the Pen ID selector by Damien Cosset (@Tagada85) on CodePen.

Attribute selectors

Class and ID are special attributes that CSS is able to handle in a special way. But in our markup, there are a LOT more attributes we can use. CSS allows us to target those in different ways to suit your needs

Simple attribute selector

You write CSS rules to check if an element has a special attribute specified. We don't even care about the value. For example, I want to target all p element who have a key attribute:

p[key] {
  color: red;
}

/* OR, all elements with a key attribute, not just p */
[key]{
  color: red;
}

As you can see, we use [] in CSS to target attributes. So this is the first one, very general.

Exact attribute values

This time, we are looking for the exact attribute value.

  /* If the href is https://google.com, it won't match */
  a[href="google.com"] {
    color: purple;
  }

  /* The following are NOT equal */
  [class="danger warning"] {
    color: red;
  }

  .danger.warning {
    color: orange;
  }

Again, we are looking for an exact match. So, if we use the bracket notation, the element needs to have the classes danger and warning, in this order AND only those two. Quite different from the dot notation...

Partial attribute values

Finally, if you really want to have great control over the attributes you are using, you'll need to use the following attribute selectors.

[attribute~="val"]{
  /* Attribute contains val in a space-separated list of words */
  /* Would match "friend" in "my friend Joe" */
}

[attribute*="val"] {
  /* Select any element with an attribute whose value CONTAINS val */
}

[attribute^="val"] {
  /* Select any element with an attribute whose value BEGINS with val */
}

[attribute$="val"] {
  /* Select any element with an attribute whose value ENDS with val*/
}

[attribute|="val"]{
  /* 
  Select any element with an attribute whose value starts with val followed by a dash (val-) 
  OR whose value is exactly equal to val.
  */
}

[attribute="val"i] {
  /* Add a i after the value to make it case insensitive ( The value will be case insensitive, NOT the attribute name. */
}

Examples:

See the Pen Partial attribute selectors by Damien Cosset (@Tagada85) on CodePen.

Conclusion

There you have it. A quick overview of the different ways you can select elements with CSS. There are of course a lot of different things possible with these tools. But it should give you enough to play around.

CSS 101: Selectors