Wat is een selector in CSS en html?
Een CSS selector is het eerste deel van een CSS regel. Het is een patroon van elementen en andere termen die de browser vertellen welke HTML elementen geselecteerd moeten worden om de CSS eigenschap waarden in de regel op toegepast te krijgen. Het element of de elementen die door de selector worden geselecteerd worden het onderwerp van de selector genoemd.
In CSS worden selectors gebruikt om de HTML-elementen op onze webpagina’s te selecteren die we willen stijlen. Er is een grote variëteit aan CSS selectors beschikbaar, die een verfijnde precisie mogelijk maken bij het selecteren van elementen om te stijlen. In dit artikel en zijn subartikelen zullen we de verschillende types in detail doorlopen, om te zien hoe ze werken.
Selector die H1 kop markeert in CSS
Er zijn vele selectors die het document op verschillende manieren targeten – bijvoorbeeld door een element zoals h1 te selecteren, of een klasse zoals .special. In CSS worden selectors gedefinieerd in de CSS Selectors specificatie; net als elk ander onderdeel van CSS moeten ze ondersteuning hebben in browsers om te kunnen werken. De meerderheid van de selectors die u zult tegenkomen zijn gedefinieerd in de Level 3 Selectors specificatie. Daarom zult u goede browserondersteuning voor deze selectors vinden.
| Selector | Voorbeeld | Handleiding |
|---|---|---|
| Type selector | h1 { } | Type selectors |
| Universal selector | * { } | The universal selector |
| Class selector | .box { } | Class selectors |
| id selector | #unique { } | ID selectors |
| Attribute selector | a[title] { } | Attribute selectors |
| Pseudo-class selectors | p:first-child { } | Pseudo-classes |
| Pseudo-element selectors | p::first-line { } | Pseudo-elements |
| Descendant combinator | article p | Descendant combinator |
| Child combinator | article > p | Child combinator |
| Adjacent sibling combinator | h1 + p | Adjacent sibling |
| General sibling combinator | h1 ~ p | General sibling |