CSS Selectors

CSS selectors are crucial in defining styles. Selectors are used to choose HTML elements and apply desired style components to them. In the last module, we covered classes, but classes are just one of the numerous ways to select HTML elements in CSS. Here are a few common CSS selectors and their use cases:

Element selector

The element selector selects all occurrences of a specific HTML element. For example, the following code snippet selects all p elements and sets their text color to red:

p {
  color: red;
}

Class Selector

The class selector is used to select all elements that contain a specific class. The class name is written after the dot. For example, the following code snippet selects all elements with the class "otsikko" and sets their font size to 20 pixels:

.title {
  font-size: 20px;
}

Id Selector

The id selector selects an individual element based on its id attribute. The id name is written after the hash sign. For example, the following code snippet selects an element with the id "otsikko" and defines its background color as blue:

#title {
  background-color: blue;
}

Combobox

The combination selector selects elements that meet multiple conditions. For example, the following code snippet selects all a elements that are in the class link:

a.link {
  text-decoration: none;
  color: blue;
}

Descendant Selector

The descendant combinator selects elements that are beneath another element. The descendant combinator consists of two individual selectors separated by a space. For example, the following code snippet selects all ul elements that are inside a div element:

div ul {
  margin: 0;
  padding: 0;
}

Parallel Selector

The parallel selector selects elements that are on the same level and share the same parent element. The parallel selector consists of two separate selectors separated by a + sign. For example, the following code snippet selects all p elements that follow an h1 element:

h1 + p {
  font-size: 16px;
}

Universal selector

The universal selector is used to select all elements. The universal selector is written with the character * . For example, the following code snippet sets the margin and padding to zero for all elements:

* {
  margin: 0;
  padding: 0;
}

Attribute selector

The attribute selector is used to select elements that have a specific attribute or attribute value. For example, the following code snippet selects all input elements that have the attribute type="text":

input[type="text"] {
  width: 100%;
}

Pseudo-class Selector

The pseudo-class selector is used to select elements that are in a certain state or action. Pseudo-classes are written after the selector separated by a colon. For example, the following code snippet selects all a elements that are active (i.e. the user has clicked the link):

a:active {
  color: red;
}

Pseudo-element selector

The pseudoelement selector creates an invisible element to which style components can be applied. Pseudoelements are written after the selector, separated by a colon. For example, the following code snippet adds dots before li elements:

li:before {
  content: "•";
  margin-right: 5px;
}

Last-child-selector

The last-child selector selects the last child element within a certain parent element. For example, the following code snippet sets the margin of the p element to zero only when it is the last child element inside a div element:

div p:last-child {
  margin-bottom: 0;
}

Nth-child selector

The :nth-child selector selects a specific child element within a certain parent element. For example, the following code snippet sets the margin of the first

div p:nth-child(1) {
  margin-top: 0;
}

Practice

Here is a simple example of an HTML document that uses all the CSS selectors mentioned above: