Selectors

In order to apply CSS rules to an element, the style needs either to be applied inline, or selected through a reference. In order to write maintainable code, it is recommended to separate style and content. That is, separate HTML and CSS. This is done through using classes or IDs.

On a page, you can only have one unique ID, while you can have several elements sharing the same class. If you want to apply the same style on several elements, e.g. a button, you would reference it using a class. If you instead only have one element of a kind on that page, e.g. main title, you would is an ID.

The class attribute is written as <div class="class-name">, and the ID attribute is written as <div id="id-name">.

In your style sheet, elements with an ID are referenced by:

#id-name {
  ...
}

and elements with classes are referenced by:

.class-name {
  ...
}

The difference being that IDs are referenced using the # in front of the name, and classes using . in front of the name.

Elements defined by the HTML standard can be referenced using only the element name, e.g. p, body and section. You would then write:

body {
    ...
}

Remember that there is a case of precedence with classes and IDs. As IDs are more specific than classes, they only apply to one element, they have a higher precedence than classes. That is, if a class and an ID describe the same property for the same element, the ID will be the one that is used. E.g. in the case of:

<style>
  #id-name{
    color: #000000; /* Font color: black */
  }

  .class-name{
    color: #FFFFFF; /* Font color: white */
  }
</style>

<div class="class-name" id="id-name">Some text</div>

the font color, described by the property color and the following value, would be black. It does not matter if the ID rule is written before or after the class rule.

It might seem silly to have two ways of referencing an element. After all, classes can be used to reference one element (but not vice versa). There are some advantages to using IDs that should be noted. As it only references one element, they are more efficient to use, compared to classes. This is because with classes the entire DOM has to be scanned for the element, while when the ID is found, there is no longer necessary to look for it. When we will learn about JavaScript, you will also see that IDs are necessary to reference the correct element to manipulate (more on that later).

There is no problem, as seen above, to combine classes and IDs. You can then have some style shared between elements, while some attributes are only for one element. You can also combine classes. E.g.:

<style>
.image-container{
  width: 300px;
  height: 200px;
}

.margin-left{
  margin-left: 30px;
}
</style>

<div class="image-container margin-left"></div>

Other selectors

You have now seen how we select classes and IDs, but it is possible to select several element at once, or select child elements. Just watch!

Universal selector

The * selector applies to all elements in the document.

* {
    ...
}

Type selector

Matches element names. In the example below the elements <h1>, <h2> and <h3> are targeted.

h1, h2, h3 {
    ...
}

Child selector

Matches an element that is a direct child of another. In the example below the selector targets any <a> element that are a children of an <li> element, that is all links within a list element. This rule does not affect other <a> elements on the page.

li > a {
    ...
}

Descendant selector

Matches an element that is a descendent of another specified element, and not just a direct child of that element. In the example below the selector targets any <a> element that is inside a <p> element, even if there are other elements nested between them.

p a {
    ...
}

Adjacent sibling selector

Matches an element that is the next sibling of another. In the example below the selector targets the first <p> element after any <h1> element, but not other <p> elements.

h1+p {
    ...
}

General sibling selector

Matches an element that is a sibling of another, although it does not have to be the directly preceding element. In the example below, if you had two <p> elements that are siblings of an <h1> element, this rule would apply to both.

h1~p {
    ...
}