Inleiding tot soorten CSS-selectors
Typen CSS-selectors worden gebruikt om de inhoud te kiezen die we willen stijlen. Het helpt bij het selecteren van elementen op basis van hun klasse, id, type, enz. Een CSS-selector is een onderdeel van de CSS-regelset.
Typen CSS-selectors
Er zijn 5 soorten CSS-selectors beschikbaar voor ons. We zullen de volgende belangrijke CSS-selectors bekijken:
- CSS Universal Selector.
- CSS-elementenkiezer.
- CSS Id Selector.
- CSS Class Selector.
- CSS-kenmerkkiezer.
1. CSS Universele selector
Op een HTML-pagina is de inhoud afhankelijk van HTML-tags. Een paar tags definieert een specifiek webpagina-element. De CSS universele selector selecteert alle elementen op een webpagina.
Voorbeeld:
* (
color: blue;
font-size: 21px;
)
Deze twee coderegels omgeven door accolades hebben invloed op alle elementen op de HTML-pagina. We verklaren een universele selector met behulp van een asterisk aan het begin van de accolade. Universele selector kan samen met de andere selectors worden gebruikt.
2. CSS-elementenkiezer
CSS Element Selector is ook bekend als een Type selector. Elementselector in CSS probeert overeen te komen met de HTML-elementen met dezelfde naam. Daarom een selector van
- komt overeen met alle
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Cheatsheet CSS3
- Vragen tijdens solliciteren bij CSS
- SASS versus SCSS
- Vragen tijdens solliciteren bij SASS
- Voorbeelden van HTML geordende lijst
- elementen dwz alle ongeordende lijsten op die HTML-pagina.
Laten we een voorbeeld bekijken voor de elementkiezer.
ul (
border: solid 1px #ccc;
)
Om dit beter te begrijpen, laten we een voorbeeld van een HTML-code bekijken om de CSS-code toe te passen die we hierboven hebben geschreven.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Demotekst
In dit voorbeeld zullen we hoofdzakelijk drie elementen vinden, namelijk de
- element, de tag en een ander
- element. Omdat onze CSS-code van toepassing is op de
- tag specifiek, de wijzigingen in de rand worden alleen gedaan voor onze
- tags, en niet voor de tags. Gewoonlijk zijn deze wijzigingen niet van toepassing op de inhoud van de
- tags ook, maar in sommige scenario's kunnen de stijlen van toepassing zijn op de binnenste elementen.
3. CSS-ID kiezen
CSS ID-selector helpt de ontwikkelaar om de ID die door de ontwikkelaar is gemaakt te koppelen aan de stylinginhoud. ID Selector wordt gebruikt met behulp van het hekje (#) vóór de ID-naam die door de ontwikkelaar is opgegeven. ID selector komt overeen met elk HTML-element met een ID-kenmerk met dezelfde waarde als die van de selector, zonder het hekje.
Hier is een voorbeeld:
#box (
width: 90px;
margin: 10px;
)
Deze CSS-code kan worden gebruikt om overeen te komen met het element met de id 'box', zoals in de volgende zin.
Hier is de tag slechts een voorbeeld. We kunnen het ID-kenmerk voor elke HTML-tag schrijven. De ID Selector komt overeen met het ID-kenmerk in het element en zoekt naar de stijl. In ons voorbeeld is de stijl van toepassing zolang elk element het ID-kenmerk 'box' bevat.
De waarde van de gebruikte ID wordt verondersteld uniek te zijn. Als dezelfde ID wordt gebruikt voor twee of meer elementen, is de code technisch ongeldig, maar de stijl van het element is nog steeds van toepassing, dus het hebben van dezelfde ID wordt meestal vermeden.
Elke keer dat u voor elke HTML-pagina een ander ID moet gebruiken, is dat vrij rigide. Behalve met starheidsproblemen, worden ID-selectors in CSS ook geconfronteerd met de kwestie van specificiteit.
4. CSS-klassenkiezer
De CSS Class-selector is een van de nuttigste selectors van alle selectors. Het wordt aangegeven met een punt gevolgd door de naam van de klasse. Deze klassenaam wordt gedefinieerd door de codeur, zoals het geval is met de ID-selector. De klassenkiezer zoekt naar elk element met een kenmerkwaarde met dezelfde naam als de klassenaam, zonder de punt.
Voorbeeld:
.square (
margin: 20px;
width: 20px;
)
Deze CSS-code kan worden gebruikt om overeen te komen met het element met het kwadraat van de klasse, zoals in de volgende zin.
Deze stijl is ook van toepassing op alle andere HTML-elementen met een kenmerkwaarde voor de klasse als 'vierkant'. Een element met dezelfde klasse-attribuutwaarde helpt ons bij het hergebruiken van de stijlen en voorkomt onnodige herhaling. Bovendien is de Class Selector voordelig omdat het ons in staat stelt om verschillende klassen aan een bepaald element toe te voegen. We kunnen meer dan één klasse aan het attribuut toevoegen door elke klasse van elkaar te scheiden.
Voorbeeld:
Hier zijn vierkant, vet en vorm drie verschillende soorten klassen.
5. CSS-kenmerkkiezer
De CSS-kenmerkstijl selecteert inhoud volgens het kenmerk en de kenmerkwaarde die tussen vierkante haken wordt vermeld. Voor de vierkante haak mogen geen spaties aanwezig zijn.
input(type="text") (
background-color: #fff;
width: 100px;
)
Deze CSS-code komt overeen met het volgende HTML-element.
Evenzo, als de waarde van het kenmerk 'type' verandert, komt de kenmerkkiezer niet overeen. De selector komt bijvoorbeeld niet overeen met het kenmerk als de waarde van 'type' is gewijzigd van 'text' in 'submit'. Als de kenmerkkiezer wordt gedeclareerd met alleen het kenmerk en geen kenmerkwaarde, dan komt deze overeen met alle HTML-elementen met het kenmerk 'type', ongeacht of de waarde 'text' of 'submit' is.
Voorbeeld:
input(type) (
background-color: #fff;
width: 100px;
)
We kunnen ook gebruik maken van kenmerkkiezers zonder een waarde buiten de vierkante haken te specificeren. Dit helpt ons om alleen het kenmerk te targeten, ongeacht het element. In ons voorbeeld zal het zich richten op het kenmerk 'type', ongeacht het element 'invoer'. CSS-selectors helpen ons onze code te vereenvoudigen en stellen ons in staat dezelfde CSS-code te gebruiken en hergebruiken voor verschillende HTML-elementen. Ze helpen ons bij het stylen van specifieke segmenten en delen van onze webpagina. Ze bieden ons de mogelijkheid om soortgelijke elementen op onze webpagina uniform te stylen. CSS-selectors zijn dus een belangrijk onderdeel van de leercurve van CSS.
Aanbevolen artikelen
Dit is een handleiding voor typen CSS-selectors. Hier hebben we de verschillende soorten CSS-selectors met voorbeelden besproken. U kunt ook onze andere voorgestelde artikelen doornemen voor meer informatie -