I dette innlegget skal jeg ta for meg enkle css selektorer som baserer seg på enkel oppførsel utifra elementenes tilstand.
CSS pseudo klasser blir brukt til å stilgjøre elementer på nettsiden i forhold til hvilken tilstand elementene er i.
Man har for eksempel :hover som blir brukt til å legge til stil eller oppførsel for når en bruker holder musepekeren over elementet.
Man har også mange andre slike, som for eksempel :first-child. Denne kan bli brukt til for eksempel en liste med elementer av typen <li> . Benytter man seg av :first-child i denne sammenhengen vil man kunne legge til stiler for det første elementet av typen <li>. Du kan også benytte :last-child som gjør det samme som :first-child men med det siste elementet i listen.
Om man ønsker å velge annenhver element kan man benytte seg av :nth-child(2n) eller :nth-child(odd) / :nth-child(even). Odd velger 1, 3, 5. even velger 2, 4, 6. Med ‘2n’ kan man legge til +1 for å starte 1 element senere :nth-child(2n+1), legg til -1 for å starte tidligere :nth-child(2n-1).
Hvis man ønsker å gjøre et unntak med en selektor kan man benytte seg av :not(). Skriv inn for eksempel et klassenavn som her :not(.aktiv) for å velge alle utenom elementet som ikke har klassenavnet ‘.aktiv’
Ønsker man å legge til ikoner, tegn eller lignende etter eller før et element kan man benytte seg av :before eller :after.
Se de ulike eksemplene i praksis i vinduet under:
Med pseudo elementer i CSS er mulighetene mange. Jeg har vist bare noe av det man kan gjøre her.
