Selectors inspecteren
CSS-selectors worden gebruikt om de elementen te selecteren die u wilt toepassen. Selectors bieden veel flexibiliteit en kracht. Met selectors kunt u een stijl toepassen op alle elementen of op één specifiek element, en zelfs op één specifieke letter.
Er zijn drie kerntypen selectors:
- Elementen
- Klassen
- Ids
Met behulp van deze selectors kunt u stijlen toepassen op veel elementen of een paar.
Element selecteurs
Een elementkiezer is van toepassing op alle elementen met die tag. Elk HTML-element kan worden gebruikt als elementkiezer. Hiermee h1 kunt u alle h1 elementen op de pagina wijzigen.
h1 {
/* style */
}
Klasse selectors
Met alle HTML-elementen kunt u een class kenmerk toevoegen.
class wordt gebruikt om elementen samen te groeperen en u in staat te stellen deze te markeren voor het toepassen van CSS-instellingen.
Bij het maken van een cv heb je secties voor je opleiding en arbeidsverleden. Met behulp van een klasse kunt u deze elementen opmaken met dezelfde stijl.
<div class="history">
<h2>Employer name</h2>
<h3>Job title</h3>
<h3>3 Jun 19 - 8 Jun 21</h3>
</div>
<div class="history">
<h2>School name</h2>
<h3>Major</h3>
<h3>Sep 2014 - May 2018</h3>
</div>
In het vorige voorbeeld wilt u waarschijnlijk dat de opmaak voor elke div opmaak hetzelfde is als bij het weergeven van vergelijkbare typen informatie. Door de twee div elementen met dezelfde klasse te markeren, kunt u dezelfde CSS-stijl toepassen op elk element.
Als u een klasse in CSS wilt identificeren, moet u een . voorvoegsel voor de naam geven. In ons voorbeeld gebruikt .historyu .
.history {
/* your styles */
}
Als u een CSS-bestand gebruikt, schrijft u de definitie van de klassestijl in het CSS-bestand. Het klassekenmerk in HTML verwijst naar de definitie uit het CSS-bestand.
Pseudoklassen
Met pseudoklassen kunt u elementen identificeren op basis van hun locatie op een pagina of hoe de gebruiker ermee communiceert.
Wanneer een gebruiker interactie heeft met een webpagina, verandert de status van verschillende elementen. Een gebruiker kan de muisaanwijzer op een item bewegen en u wilt dat de kleur wordt gewijzigd wanneer deze de muisaanwijzer aanwijst. Of als de gebruiker een link heeft geselecteerd. Nadat ze die link hebben bezocht, kun je ze dit laten weten door de stijl te wijzigen. CSS ondersteunt veel pseudoklassen, die dynamisch worden toegepast op basis van wat de gebruiker doet of heeft gedaan. Pseudoklassen worden voorafgegaan door een :, en worden na een andere selector geplaatst.
Als u bijvoorbeeld de achtergrondkleur van een koppeling wilt instellen op geel wanneer een gebruiker de cursor erboven plaatst, kunt u de volgende CSS gebruiken:
a:hover {
background-color: yellow;
}
Enkele van de meest voorkomende pseudoklassen worden vermeld in de volgende tabel:
| Pseudoklasse | Beschrijving |
|---|---|
hover |
Gebruiker beweegt de muisaanwijzer over een item |
visited |
Een link waarop eerder is geklikt |
link |
Een niet-bekeken koppeling |
first-child |
Het eerste onderliggende item dat overeenkomt met de selector in een hiërarchie |
last-child |
Het laatste onderliggende item dat overeenkomt met de selector in een hiërarchie |
Belangrijk
Met behulp van pseudo-elementen en CSS kunt u de onderstreping verwijderen uit hyperlinks. Over het algemeen kunt u het beste de onderstreping laten voor toegankelijkheidsdoeleinden. Met de onderstreepte tekst kan een gebruiker snel koppelingen op een pagina identificeren.
ID-selecteurs
Net als bij klassen kunt u met een id een stijl toepassen op een element. Maar hoewel een klasse kan worden toegepast op meerdere elementen, moet een id uniek zijn en slechts naar één element verwijzen.
Op een cv hebt u mogelijk een sectie voor sociale media, zoals X, GitHub of uw blog. Als u een aangepaste stijl voor die sectie wilt, kunt u een id instellen:
<div id="social-media">
<!-- list of links -->
</div>
Id's worden voorafgegaan door een # in CSS:
#social-media {
/* style */
}
Notitie
Standaardnaamconventie voor klassen en id's is het gebruik van 'skewer-casing'. Elk woord is kleine letters en wordt gescheiden door een -. De naamskewer-case komt van hoe de woorden lijken alsof ze op een spies kunnen staan.