Impara Other Selectors | Selectors and Cascade

Element selector

This selector is used to select and style all elements of a particular type on the page. It is identified by the element type (e.g., p, div, h1, etc.).

p {
  color: blue;
}

This selector will select and style all p elements on the page, giving them a blue color.

index.html

index.css

Descendant selector

This selector is used to select and style elements that are descendants of a particular element. The ancestor element, a space, and the descendant element identify it.

div p{
  font-size: 12px;
}

This selector will select and style all p elements descendants of a div element, giving them a font size of 12px.

index.html

index.css

Child selector

This selector is used to select and style elements that are direct children of a particular element. It is identified by the parent element, followed by a > symbol, followed by the child element.

div > p {
  font-style: italic;
}

This selector will select and style all p elements that are direct children of a div element, giving them an italic font style.

index.html

index.css

Adjacent sibling selector

This selector is used to select and style elements that are siblings of a particular element and come immediately after it. It is identified by the first element, followed by a + symbol, followed by the second element.

div + p {
  margin-top: 0;
}

index.html

index.css

General sibling selector

This selector is used to select and style elements that are siblings of a particular element and come after it. It is identified by the first element, followed by a ~ symbol, followed by the second element. For example:

div ~ p {
  color: red;
}

This selector will select and style all p elements that are siblings of a div element and come after it, giving them a red color.

index.html

index.css

Attribute selector

This selector selects and styles elements based on their attribute values. It is identified by the element type, followed by an opening square bracket [, followed by the attribute name and value, and a closing square bracket ].

a[href^="https"] {
  color: orange;
}

This selector will select and style all elements with an href attribute that starts with 'https', giving them an orange color.

index.html

index.css

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 3

Chieda ad AI

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

Mi faccia domande su questo argomento

Riassuma questo capitolo

Mostri esempi dal mondo reale

Scorri per mostrare il menu

Element selector

This selector is used to select and style all elements of a particular type on the page. It is identified by the element type (e.g., p, div, h1, etc.).

p {
  color: blue;
}

This selector will select and style all p elements on the page, giving them a blue color.

index.html

index.css

Descendant selector

This selector is used to select and style elements that are descendants of a particular element. The ancestor element, a space, and the descendant element identify it.

div p{
  font-size: 12px;
}

This selector will select and style all p elements descendants of a div element, giving them a font size of 12px.

index.html

index.css

Child selector

This selector is used to select and style elements that are direct children of a particular element. It is identified by the parent element, followed by a > symbol, followed by the child element.

div > p {
  font-style: italic;
}

This selector will select and style all p elements that are direct children of a div element, giving them an italic font style.

index.html

index.css

Adjacent sibling selector

div + p {
  margin-top: 0;
}

index.html

index.css

General sibling selector

div ~ p {
  color: red;
}

This selector will select and style all p elements that are siblings of a div element and come after it, giving them a red color.

index.html

index.css

Attribute selector

a[href^="https"] {
  color: orange;
}

This selector will select and style all elements with an href attribute that starts with 'https', giving them an orange color.

index.html

index.css

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 3