Web: Essentials

Appearance

CSS: selectors ​

Om een element van onze HTML pagina een stijl te geven moeten we deze eerst selecteren. Daarvoor kunnen we een selector gebruiken.

Er zijn 6 soorten selectors:

  • Type selector
  • Class selector
  • (ID selector)
  • Attribute selector
  • Pseudo class selector
  • Combinatie selectors

1. Type selector ​

Met een type selector selecteer je op basis van de naam van de HTML tag. Hierbij laten we de brackets (<, >) weg.

html
<p>Een stukje tekst</p>
css
/* We selecteren de p tag. */
p {
  color: blue;
}

Een stukje tekst

2. Class selector ​

Om een class selector te gebruiken moeten we eerst even terug naar HTML:

  • Op elke HTML tag kan je een class attribuut toepassen.
  • De waarde van dit attribuut is vrij te bepalen.
  • Een class attribuut kan ook meerdere waardes bevatten gescheiden door een spatie.
  • Als je lange classes wil schrijven kan je een koppelteken of een liggend streepje gebruiken
  • We schrijven classes steeds in het engels.

Voorbeeld:

html
<p class="onze-eerste-selector onze-tweede-selector">Een stukje tekst</p>

In CSS kunnen we een class selecteren door een . voor de naam van de class te plaatsen.

html
<p class="intro red">Een stukje tekst</p>
css
/* We selecteren de intro class */
.intro {
  font-size: 2rem;
}

/* We selecteren de red class */
.red {
  color: red;
}

Een stukje tekst

3. (ID selector) ​

In de praktijk wordt de ID selector nooit gebruikt maar voor de volledigheid wordt deze hier kort toegelicht.

Een ID selector werkt op basis van het ID attribuut. Zoals een class kan elk HTML element een ID attribuut hebben:

  • de waarde van een ID moet uniek zijn
  • een ID kan maar 1 waarde bevatten.

Een ID selecteren we door een # voor de naam van de id te zetten.

html
<p id="uniek">Een stukje tekst</p>
css
/* We selecteren de #uniek id. */
#uniek {
  color: blue;
}

Een stukje tekst

4. Attribute selector ​

Selecteer op basis van een attribuut. Je plaats de naam en optioneel de waarde van het attribuut tussen vierkante haakjes (square brackets).

html
<a href="link.html" target="_blank">Een link</a>
<p class="red">Een stukje tekst.</p>
css
/* We selecteren de alle p tags met een class. */
p[class] {
  font-size: 2rem;
}

/* We selecteren de alle tags met een target met waarde _blank. */
[target="_blank"] {
  color: purple;
}
Een link

Een stukje tekst.

5. Pseudo-class selector ​

Met een pseudo class selector kan je een status van een element selecteren:

  • :hover: als je hovert over een element of link
  • :visited: als je een link reeds bezocht hebt
html
<a href="link.html">Een link</a>
css
/* We selecteren de hover status van een a tag */
a:hover {
  color: red;
}

/* We selecteren de bezochte status van een a tag */
a:visited {
  color: purple;
}

Bekijk de volledige lijst van pseudo-classes hier: Pseudo-classes

Selectors groeperen ​

Je kan ook meerdere selectors tegelijk selecteren als je die oplijst met een komma ertussen.

html
<h1>Titel</h1>
<p>Een stukje tekst</p>
css
/* We selecteren de h1 en p tag. */
h1,
p {
  color: blue;
}

Titel

Een stukje tekst

Selectors combineren ​

Je kan ook meerdere selectors combineren. Hiervoor zijn er een aantal opties.

Descendant selector ​

Selecteer bepaalde tags binnen een selector.

html
<div>
  <p>Dit is een tekst met <a href="link.html">een link</a></p>
<div>
css
/* We selecteren alle a tags binnen een div tag */
div a {
  color: red;
}

Dit is een tekst met een link

Child combinator: > ​

Selecteer een child van een selector.

html
<p>Dit is een tekst met <a href="link.html">een link</a></p>
css
/* We selecteren alle a tags die een child zijn van een p tag */
p > a {
  color: red;
}

Dit is een tekst met een link

Next Sibling combinator: + ​

Selecteer alle elementen die direct volgen na een ander element.

html
<p>Dit is een tekst met <a href="link.html">een link</a></p>
<p>Deze tekst volgt direct op een andere p tag</p>
css
/* We selecteren alle p tags die direct volgen op een andere p tag */
p + p {
  color: red;
}

Dit is een tekst met een link

Deze tekst volgt op een andere p tag

Subsequent-sibling combinator: ~ ​

Selecteer alle elementen die volgen na een ander element. Deze hoeven niet direct te volgen na het element.

html
<p>Dit is een tekst met <a href="link.html">een link</a></p>
<h2>Subtitel</h2>
<p>Deze tekst volgt op een andere p tag</p>
css
/* We selecteren alle p tags die volgen op een andere p tag */
p ~ p {
  color: red;
}

Dit is een tekst met een link

Subtitel

Deze tekst volgt op een andere p tag

Oefening

Oefen je selector skills met deze oefening