Selectors zijn de manier waarop CSS-stijlen worden toegepast op HTML-elementen. Er zijn verschillende soorten selectors die bepalen hoe een stijl moet worden toegepast.
1. Eenvoudige selectors (selecteer elementen op basis van naam, id, klasse)
- Tagname: De stijl wordt toegepast op alle elementen met die tag. Voorbeeld: p {color: red;}. Dit kleurt alle paragrafen (p tags) rood.
- .class: De stijl wordt toegepast op alle elementen met die class. Voorbeeld: .intro {font-size: 20px;}. Dit verandert de lettergrootte van alle elementen met de class “intro”.
- #id: De stijl wordt toegepast op het element met dat id. Voorbeeld: #first {margin-top: 50px;}. Dit wijzigt de bovenmarge van het element met het id “first”.
1. Combinator selectors (selecteer elementen op basis van een specifieke relatie tussen hen)
- Teken voor afstammelingen ( ): De stijl wordt toegepast op elk element dat zich binnen een ander specifiek element bevindt. Voorbeeld: div p {color: blue;}. Dit kleurt alle paragrafen blauw die zich ergens binnen een div bevinden.
- Kindteken (>): De stijl wordt alleen toegepast op elementen die directe kinderen zijn van een specifiek element. Voorbeeld: div > p {color: blue;}. Dit kleurt paragrafen die zich direct binnen een div bevinden blauw.
- Aangrenzend broertje of zusje teken (+): De stijl wordt toegepast op een element dat direct volgt op een ander specifiek element. Voorbeeld: div + p {color: blue;}. Dit kleurt een paragraaf blauw als die direct volgt op een div.
1. Pseudo-class selectors (selecteer elementen op basis van een bepaalde staat)
- :hover: De stijl wordt toegepast wanneer de muis over het element zweeft. Voorbeeld: a:hover {color: red;}. Dit verandert de kleur van een link in rood wanneer je met de muis over de link zweeft.
- :focus: De stijl wordt toegepast wanneer het element de focus heeft, bijvoorbeeld wanneer een gebruiker aan het typen is in een invoerveld. Voorbeeld: input:focus {background-color: yellow;}. Dit verandert de achtergrondkleur van een invoerveld in geel wanneer een gebruiker erin typt.
- :checked: Selecteert elk checkbox of radio input element dat is gecontroleerd. Voorbeeld: input:checked {background-color: blue;}. Dit verandert de achtergrondkleur van een gecontroleerd checkbox of radio input veld in blauw.
1. Pseudo-elements selectors (selecteer en stijl een deel van een element)
- ::first-line: De stijl wordt toegepast op de eerste lijn van het element. Voorbeeld: p::first-line {font-size: 200%;}. Dit verandert de grootte van het lettertype in de eerste regel van een paragraaf.
- ::first-letter: De stijl wordt toegepast op het eerste teken van het element. Voorbeeld: p::first-letter {font-size: 300%;}. Dit verandert de grootte van het lettertype in de eerste letter van een paragraaf.
- ::before, ::after: Deze pseudo-elementen worden gebruikt om inhoud in te voegen vóór of na de inhoud van het geselecteerde element. Voorbeeld: p::before {content: “►”;}. Dit voegt een pijl toe vóór elke paragraaf.
CSS selectors kunnen ook worden gecombineerd om meer specifieke selecties te maken. Bijvoorbeeld: p.first::first-letter selecteert de eerste brief van elke paragraaf die de class “first” heeft.
