CSS .class selector

definitie en gebruik

CSS .class selectors worden gebruikt om elementen met specifieke class eigenschappenwaarden te kiezen, schrijf dan de naam van het element, gevolgd door een punt (

om alle typen elementen met een specifieke.) tekens, gevolgd door class eigenschappenwaarden te kiezen.

element.class selectors worden gebruikt om elementen met specifieke class eigenschappenwaarden te kiezen voor elementen.

om alleen specifieke class een type element, gevolgd door een punt (.) tekens, gevolgd door class waarde van eigenschappen (zie het voorbeeld hieronder 2) gebruiken.

Tip:HTML-elementen kunnen ook meerdere class（Zie het voorbeeld hieronder 3）。

Voorbeeld

Voorbeeld 1

Selecteer en stel de stijl in voor alle elementen met class="inleiding":

.inleiding {
  background-color: geel;
}

Probeer het zelf

Voorbeeld 2

Selecteer en stel de stijl in voor alle <p>-elementen met class="inleiding":

p.inleiding {
  background-color: geel;
}

Probeer het zelf

Voorbeeld 3

.class Verschillende toepassingen van selectors:

/* Kies alle elementen met class="center" */
.center {
  text-align: center;
}
/* Kies alle <p>-elementen met class="groot" */
p.groot {
  font-size: 200%;
}
/* Kies alle <p>-elementen die class bevat "fancy" en "beige" */
p.fancy.beige {
  font-family: 'Courier New', monospace;
  background-color: beige;
  border: 2px vast groen;
}
/* Kies alle elementen met class="ex1" binnen de <p>-elementen die class="ex2" hebben */
p.ex1 .ex2 {
  background-color: geel;
}

Probeer het zelf

CSS-syntaxis

.class {
  css-declaraties;
}

CSS-syntaxis

element.class {
  css-declaraties;
}

Technische details

Browserondersteuning