7 – CSS selectors

Fram till nu har vi verktyg i CSS för att ändra färg på alla taggar av en viss sort. Ändrar vi egenskaper för elementet <p> ändrar vi på all text som ligger i alla <p>-element. Oftast vill man att olika delar av hemsidan ska få olika egenskaper.

Ett exempel är att du i din sidfot vill att texten ska vara något mindre i storlek än i huvudinnehållet. Texten kanske ska vara mörkgrå istället för svart så den inte är riktigt lika stark som övriga innehållet.

Du kan peka ut bara texten som ligger i sidfoten med följande CSS.

footer p {
  color: red;
}

Notera hur vi har två ord i vår CSS-selector. Jag tänker mig det som att webbläsaren letar upp alla <footer>-element och går in i dem och letar efter alla <p>-element.

Det är inte begränsat till bara två ord utan vi kan lika gärna ändra all text som ligger i <strong>-taggar.

footer p strong {
  font-size: 120%;
}

Förutom att ge en längre sökväg finns det otroligt många andra sätt att peka ut olika element i HTML. Nedan följer några vanliga.

ID & Class

Alla element i HTML kan få en slags namn eller en slags sort. Du kan behöva detta när du t.ex. har många rubriker som ska se olika ut.

För att namnge ett element använder man attributet ID. På varje HTML-sida får ett ID finnas max en gång (& aldrig mer än en gång).

Skapar du istället ett element som ska användas många gånger använder du attributet class.

<h1 id="foretagsnamn">Webbskolan</h1>

<p class="diskret">Lite tunnare brödtext</p>
<p>Vanlig brödtext</p>
<p class="diskret">Mer tunnare</p>

I CSSen kan du sedan ändra dem så här

#foretagsnamn {
  font-family:fantasy;
}

.diskret {
  color: #ccc;
}

Det smarta i första exemplet är att du ändrar exakt de elementet och inget annat. I det andra fallet ändrar du flera liknande element men inte alla stycke.

Pseudos

Ofta kan man vilja att färgen ändras när musen kommer över en länk. Det finns en teknik som heter pseudo-klasser för att göra detta i CSS.

a:hover {
  background-color: red;
}

Det måste inte vara på just en länk du ändrar färgen. Det finns väldigt många olika. De vanligaste är följande:

  • :hover
  • :active
  • :first-child
  • :last-child

Det finns även ett gäng pseudo-element. Det är alltså ett element som lägger sig i din HTML precis före eller efter elementet du sätter det på.

  • ::before
  • ::after

Övningar

 

  1. Öppna filen CSS-selectors-övningar i ett nytt fönster i er webbläsare. Läs texten och gör övningarna :)
  2. Gör minst de 10-15 första övningarna på CSS Diner. Många är väldigt svåra så ta god tid.