CSS-kombinatorer


Innehållsförteckning

    Visa innehållsförteckning


CSS-kombinatorer

En kombinator är något som förklarar förhållandet mellan väljarna.

En CSS-väljare kan innehålla mer än en enkel väljare. Mellan det enkla väljare kan vi inkludera en kombinator.

Det finns fyra olika kombinatorer i CSS:

  • ättlingsväljare (mellanslag)

  • barnväljare (>)

  • intilliggande syskonväljare (+)

  • allmän syskonväljare (~)


Descendant Selector

Efterkommandoväljaren matchar alla element som är avkomlingar till en angiven element.

Följande exempel väljer alla <p>-element inuti <div>-element:

Exempel

div p {
  background-color: yellow;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Descendant Selector</h2>

<p>The descendant selector matches all elements that are descendants of a specified element.</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>



Barnväljare (>)

Barnväljaren väljer alla element som är barn till en specificerat element.

Följande exempel väljer alla <p>-element som är barn till en <div> element:

Exempel

div > p {
  background-color: yellow;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Child Selector</h2>

<p>The child selector (&gt;) selects all elements that are the children of a specified element.</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section>
    <!-- not Child but Descendant -->
    <p>Paragraph 3 in the div (inside a section element).</p>
  </section>
  <p>Paragraph 4 in the div.</p>
</div>

<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>

</body>
</html>




Intilliggande syskonväljare (+)

Den intilliggande syskonväljaren används för att välja ett element som är direkt efter ett annat specifikt element.

Syskonelement måste ha samma överordnade element och "intilliggande" betyder "direkt efter".

Följande exempel väljer det första <p>-elementet som placeras omedelbart efter <div>-element:

Exempel

div + p {
  background-color: yellow;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Adjacent Sibling Selector</h2>

<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>

</body>
</html>



Allmän syskonväljare (~)

Den allmänna syskonväljaren väljer alla element som är nästa syskon till ett angivet element.

Följande exempel väljer alla <p>-element som är nästa syskon till <div>-element:

Exempel

div ~ p {
  background-color: yellow;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>General Sibling Selector</h2>

<p>The general sibling selector (~) selects all elements that are next siblings of a specified element.</p>

<p>Paragraph 1.</p>

<div>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

</body>
</html>




Alla CSS Combinator Selectors

element element

Exempel:

div p

Exempelbeskrivning:

Markerar alla <p>-element i <div>-element

element>element

Exempel:

div > p	

Exempelbeskrivning:

Väljer alla <p>-element där föräldern är ett <div>-element

element+element

Exempel:

div + p	

Exempelbeskrivning:

Väljer det första <p>-elementet som placeras omedelbart efter <div>-element

element1~element2

Exempel:

p ~ ul	

Exempelbeskrivning:

Väljer alla <ul>-element som föregås av ett <p>-element