CSS selectors:
Delen opmaken
In css gebruik je de standaard tags en eigen labels om specifieke delen van de website op te maken.
Dat gaat met opmaakregels:
Als je verwijst naar een deel wat is ingepakt met een standaard tag dan gebruik je in die css-regel gewoon de naam van de tag als selector:
in HTML: ≺h1≻
h1 {
color: red;
}
Als je zelf een class-naam hebt toegevoegd dan wordt het:
in HTML: ≺div class=″mijn_Label″≻
selector in CSS: .mijn_Label
Als je zelf een id-naam hebt toegevoegd dan wordt het:
in HTML: ≺div id=″mijn_Label″≻
selector in CSS: #mijn_Label
De opmaak kun je specifiek maken bij acties van de gebruiker. Bijvoorbeeld de kleur laten veranderen als de gebruiker met de muis over een hyperlink gaat. Om dat in te stellen voeg je aan de selector ″a″ een pseudo-class ″:hover″ toe. De a:hover verwijst naar de gebeurtenis dat de gebruiker met de muis over de link gaat. Je krijgt een kleurverandering door bij a:hover een andere kleur in te stellen dan bij a.
Voorbeeld in code:
a {
color:blue;
}
a:hover {
color:white;
}
Hieronder zie je nog meer pseudo-classes.
Selectors zijn samen te stellen. Erg handig kan zijn dat je meerdere delen tegelijkertijd opmaakt door hun namen achter elkaar te zetten. Zorg dan wel voor een komma ertussen!
Met komma is het een opsomming. Zonder komma is het een heel nauwkeurige beschrijvng van een specifiek deel van de inhoud!
Bron: w3school.com