CSS selectors voor beginners

Oei, dat klinkt spannend, het lijkt bijna taal voor de echter computer geeks.

Echter CSS selectors voor beginners heeft als bedoeling om je te vertellen hoe het precies zit met het schrijven van CSS en welke basisprincipes je in acht moet houden wil je op een goede manier met CSS omgaan.

Het is belangrijk om de Selectors goed te gebruiken want daarmee doe je veel voordeel. Je kunt bijvoorbeeld de eerste paragraaf in een div voorzien van vetgedrukte letters zonder deze meteen een class mee te moeten geven.

Heb je geen idee waar ik het in het vorige stukje over heb dan raad ik je aan enkele beginners artikelen te lezen over CSS.

Algemene selector.

Met een selector kun je aangeven over welk onderdeel van de HTML code de CSS code aanpassingen moet doen. Wil je CSS toepassen voor de hele website en voor alle HTML code dan gebruik je de selector *.
Met het sterretje geef je aan dat de toegevoegde stijl voor alle HTML geldt.

Dit wordt bijvoorbeeld gebruikt wanneer je begint met je stijlblad en je wilt alle padding en margin op nul zetten. Dit wordt vaak toegepast omdat Internet Explorer anders omgaat met padding en margin dan andere browsers.

De selector is dus *. Een voorbeeld:

* {
padding: 0;
margin: 0;
}

Specifiek element

Je kunt ook een specifiek element selecteren. Je kiest dan bijvoorbeeld om iedere div een bepaalde lettergrootte mee te geven.

Voorbeeld:

div {
font-size: 12px;
}

Alles binnen een element selecteren

De volgende selector is om alle HTML codes die in een bepaalde HTML code vallen te kunnen selecteren. Een voorbeeld. In een div staan meerdere HTML codes. Deze HTML codes moeten allemaal een specifiek formaat mee krijgen.

Je kunt dan eerst de div bepalen en dan met een sterretje erachter aangeven dat de stijl toegepast moet worden op alle HTML in iedere div.

div * {
width: 20%;
}

Volgende mogelijkheid is om in een div een specifiek HTML element te selecteren. Dit doe je door het eerste element te laten volgen door het tweede element, zonder een teken hiertussen. Dus enkel scheiden met een spatie.

Voorbeeld hiervan is dat je alle <span>-elementen in een div rood kunt maken als volgt:

div span {
color: red;
}

Meerdere elementen selecteren

Wanneer je een komma plaatst tussen beide elementnamen, dan worden alle div en span teksten in het geval van het voorbeeld rood. Beide groepen vallen dus onder de selectie van de CSS die je gebruikt.

div, span {
color: red;
}

Deze selector gebruik je vaak als je bijvoorbeeld alle nieuwe HTML5 onderdelen wilt voorzien van de code voor oudere browsers dat het om block elementen gaat:

section,article,aside,header,footer,nav {
display: block;
}

ID selector

Het volgende onderdeel is de ID selector. Een ID is een uniek onderdeel op een webpagina. Een ID kan dus maar een keer voorkomen in de code van een website. Denk bijvoorbeeld aan een stuk tekst ‘over mij’, wat je op iedere pagina wilt plaatsen. Dit stukje tekst staat dan in een div. Dan kan de HTML code er als volgt uit zien:

Over Bjorn...

Je ziet dat de div een ID met de naam about heeft meegekregen.

Deze ID gaan we vervolgens als ID selector inzetten in CSS

#about {
color:...
... absolute;
}

De class selector

De class selector lijkt op de ID selector, alleen deze mag vaker gebruikt worden in een HTML document (Er gebeurt overigens niets ernstigs als je een ID meerdere malen gebruikt, tenzij je het ook inzet voor scripts, maar dat terzijde…).

We willen als voorbeeld steeds een klein stukje van de tekst rood tonen. Deze tekst plaatsen we in HTML code met een class:

De tekst begint hier en wordt rood en weer gewoon zwart.

In CSS gebruiken we de class selector dan als volgt:

.rood {
color: red;
}

Het verschil zit hem dus in het hekje (#) voor ID en de punt (.) voor de class.

Dit is het eerste deel van vier artikelen over CSS selectors

Artikel 1 – CSS selectors voor beginners
Artikel 2 – CSS selectors, de familie
Artikel 3 – Pseudo selectors :before, :after, :first-child en :focus.
artikel 4 – komt nog