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:

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:

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:

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:

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:

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:

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:

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:

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":

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):

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:

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:

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

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

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:

```css
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:

```css
.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:

```css
#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:

```css
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:

```css
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:

```css
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:

```css
* {
  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":

```css
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):

```css
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:

```css
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:

```css
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

```css
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:

@embed 9cf6a078f743


CSS Selectors

This course is an introduction to web development and focuses on the basics of HTML, CSS, JavaScript and backend systems. The aim of the course is to provide students with the necessary skills and knowledge to design, develop and understand simple web applications.

This course is an introduction to web development and focuses on the basics of building websites, namely HTML, CSS, JavaScript, and fundamentals of backend systems. The goal of the course is to provide you with the necessary skills and knowledge to design and develop simple full-stack web applications, as well as understand web applications made by others.

In the first part, HTML is studied, which is a markup language used in building websites.


The second part covers the basics of CSS, such as the use of style sheets, rules, selectors, and formatting. It also covers advanced features of CSS, such as animations and responsive design.

In the third part, we will study JavaScript, which is currently an incredibly important tool in both frontend and backend development, and thus also in cybersecurity and ethical hacking.

In the final part, we will learn how to build back-end systems using the Python Flask framework. You will learn the basics of back-end systems, such as using databases, authentication, session management, and access control.

You can do the course exercises on your own computer if you want, but each code example has a button that allows you to directly run the code in the browser and see what the page looks like or what the script prints. So you do not need to install anything, but you can if you want.

It is recommended but optional to create an account on replit.com service. In that case, you can just click "Fork" on the code examples to make a copy for yourself to play with

CSS Selectors

Element selector

Learn to hack — start here