CSS-selectors zijn een van de belangrijkste kenmerken van de CSS-taal. Met selectors hebt u toegang tot een groep elementen of slechts één daarvan.

Selectoren in CSS

Selectors worden gebruikt om de browser te vertellen welke elementen de stijlen moeten toepassen die tussen accolades worden beschreven.

P(
Stijlen...
}

In dit geval is de selector p – alineatag. Deze regel voegt stijlen toe aan alle alinea's op een webpagina.

Wat zijn de soorten CSS-selectors?

Tagkiezer - de eenvoudigste. Het is aangetoond in een voorbeeld. Om het in CSS te schrijven, moet je de tagnaam zonder punthaken schrijven. De stijlen worden toegepast op alle elementen met die tag.
Table() – stijlen voor alle tabellen
Li() – stijlen voor alle lijstitems
A() – stijlen voor alle links

Stijl klasse– u kunt een stijlklasse aan elk element op een webpagina koppelen. Zelfs tot één letter. Vervolgens kunt u in het CSS-bestand toegang krijgen tot dit element door er uw eigen stijlen voor te schrijven. Om dit te doen, moet je een punt plaatsen en de naam van de stijlklasse erna schrijven. Voorbeelden:
.about() – de regels zijn van toepassing op alle elementen met de attribuutklasse = “about”
.down() – de regels worden toegepast op alle elementen met de attribuutklasse = “down”
.float() – de regels zijn van toepassing op alle elementen met de attribuutklasse = “float”

Zoals je kunt zien, is het belangrijkste om een ​​punt te maken. Een stijlklasse kan aan een onbeperkt aantal elementen worden gebonden. Aan een element kunnen meerdere klassen worden toegewezen.

Identificatie– een ander type selector. Eén identificatie kan aan slechts één element worden toegewezen. Het kan geen twee ID's hebben en de ID die aan dit element is gekoppeld, kan nergens anders worden geregistreerd.

Het is als volgt ingesteld:

Paragraaf

Dat wil zeggen dat, net als bij een klasse, alleen het attribuut wordt gebruikt Identiteitskaart elk woord wordt gebruikt als betekenis.

Om via css toegang te krijgen tot een element met een ID, moet je de id-waarde schrijven en er een hash voor zetten.

#Eerst(
Lettergrootte: 22px
}

We gingen naar de paragraaf met Identiteit = eerste. De stijl wordt er alleen op toegepast. Voor de overige alinea's verandert de lettergrootte niet.

In dit artikel zullen we het hebben over CSS-selectors. We zullen kijken naar zowel oude CSS-selectors, die zelfs IE6 ondersteunt, als volledig nieuwe CSS3-selectors, die alleen de nieuwste versies van browsers ondersteunen. Dus laten we beginnen.

1.

* ( marge: 0; opvulling: 0; )

Laten we beginnen met de eenvoudigste dingen en dan verdergaan met meer geavanceerde dingen.

Deze CSS-selector selecteert elk element op de pagina. Veel ontwikkelaars gebruiken het om de marge- en opvulwaarden van alle elementen opnieuw in te stellen. Op het eerste gezicht is dit handig, maar het is nog steeds beter om dit niet in productiecode te doen. Deze CSS-selector is te zwaar voor de browser.

* kan ook worden gebruikt om onderliggende elementen te markeren.

#container * ( rand: 1px effen zwart; )

In dit geval worden alle onderliggende elementen van #container geselecteerd. Nogmaals, probeer het niet te veel te gebruiken.

Verenigbaarheid

• IE6+
• Firefox
• Chroom
• Safari
• Opera

2. #X

container (breedte: 960px; marge: auto; )

Een hekje vóór de CSS-selector X markeert het element met id = X. Het is heel eenvoudig, maar wees voorzichtig bij het gebruik van id.

Vraag uzelf af: moet ik absoluut markeren op ID?

id-waarden vergrendelen de stijl stevig aan het element en zijn niet herbruikbaar. Het verdient de voorkeur om klassen, tagnamen of zelfs pseudo-klassen te gebruiken.

Verenigbaarheid

• IE6+
• Firefox
• Chroom
• Safari
• Opera

3.X

fout (kleur: rood; )

Dit is een CSS-selector van klasse X. Het verschil tussen id en klasse is dat één klasse meerdere elementen op een pagina kan bezitten. Gebruik klassen als u een stijl op meerdere elementen van hetzelfde type wilt toepassen. Wanneer u id gebruikt, moet u voor elk afzonderlijk element een stijl schrijven.

Verenigbaarheid

• IE6+
• Firefox
• Chroom
• Safari
• Chroom

4. XY

li a ( tekstversiering: geen; )

De CSS-kinderelementselector is de meest voorkomende. Als u elementen van een bepaald type uit veel onderliggende elementen moet selecteren, gebruikt u deze selector. U moet bijvoorbeeld alle links selecteren die zich in het li-element bevinden. Gebruik in dit geval deze selector.

Je moet geen CSS-selectors maken zoalsX Y Z A B.fout. Vraag jezelf altijd af of het nodig is om zo’n omslachtige CSS-selector te schrijven om een ​​bepaald element te markeren.

Verenigbaarheid

• IE6+
• Firefox
• Chroom
• Safari
• Chroom

5.X

a ( kleur: rood; ) ul ( marge-links: 0; )

Wat als u alle elementen van een bepaald type op een pagina wilt bedekken? Houd het simpel: gebruik een CSS-typekiezer. Als je alle ongeordende lijsten moet selecteren, gebruik dan ul().

Verenigbaarheid

• IE6+
• Firefox
• Chroom
• Safari
• Opera

a:link ( kleur: rood; ) a:visted ( kleur: paars; )

We gebruiken de pseudo-class:link om alle links te markeren waarop nog niet is geklikt.

Als we een bepaalde stijl moeten toepassen op reeds bezochte links, gebruiken we de pseudo-klasse: bezocht.

Verenigbaarheid

• IE7+
• Firefox
• Chroom
• Safari
• Opera

7. X+Y

ul + p ( kleur: rood; )

Selecteert het volgende element. Hij zal kiezen alleen een element van het type Y dat direct na het X-element komt. In het voorbeeld is de tekst van de eerste alinea na elke ul rood.

Verenigbaarheid

• IE7+
• Firefox
• Chroom
• Safari
• Chroom

8. X>Y

div#container > ul (rand: 1px effen zwart; )

Het verschil tussen standaard X Y en X > Y is dat de betreffende CSS-selector alleen directe onderliggende elementen selecteert. Neem bijvoorbeeld de volgende code.

De CSS-selector #container > ul selecteert alleen uls die directe onderliggende elementen zijn van divs met id = container . Er worden bijvoorbeeld geen uls geselecteerd die kinderen zijn van de eerste li's.

Daarom kunt u prestatievoordelen behalen met deze CSS-selector. In feite wordt dit vooral aanbevolen bij het werken met jQuery of andere bibliotheken die elementen selecteren op basis van CSS-selectorregels.

Verenigbaarheid

• IE7+
• Firefox
• Chroom
• Safari
• Opera

9. X ~ Y

ul ~ p ( kleur: rood; )

Deze CSS-selector lijkt sterk op X+Y, maar is minder beperkend. Als u ul + p gebruikt, wordt alleen het eerste element na X geselecteerd. In dit geval worden alle p-elementen die naar ul gaan geselecteerd.

Verenigbaarheid

• IE7+
• Firefox
• Chroom
• Safari
• Opera

10.X

een(kleur:groen;)

CSS-selectors kunnen ook attributen gebruiken. In dit voorbeeld hebben we bijvoorbeeld alle links geselecteerd die het title-attribuut hebben. Andere links blijven onaangetast.

Verenigbaarheid

• IE7+
• Firefox
• Chroom
• Safari
• Opera

11.X

a ( kleur: #ffde00; )

Houd er rekening mee dat er citaten zijn. Vergeet niet hetzelfde te doen in jQuery en andere JavaScript-bibliotheken waarin elementen worden geselecteerd met behulp van CSS-selectors. Gebruik waar mogelijk altijd CSS3 CSS-selectors.

Een goede regel, maar te streng. Wat te doen als de link niet direct naar, maar bijvoorbeeld naar? In deze gevallen kunnen we reguliere expressies gebruiken.

Verenigbaarheid

• IE7+
• Firefox
• Chroom
• Safari
• Chroom

12.X

een (kleur: #1f6053; )

Verenigbaarheid

• IE7+
• Firefox
• Chroom
• Safari
• Opera

13.X

a ( achtergrond: url(pad/naar/extern/icon.png) no-repeat; opvulling-links: 10px; )

Heb je je ooit afgevraagd hoe sommige websites een klein pictogram naast externe links kunnen weergeven? Ik weet zeker dat je ze al eerder hebt gezien, ze zijn zeer gedenkwaardig.

“^” is het meest gebruikte teken in reguliere expressies. Het wordt gebruikt om het begin van een lijn te markeren. Als we alle tags willen omvatten waarvan de href begint met http, moeten we de bovenstaande CSS-selector gebruiken.

Houd er rekening mee dat we niet op zoek zijn naar “http://”. Dit is niet correct omdat er geen rekening wordt gehouden met adressen die beginnen met https://

Wat als we alleen een stijl willen instellen voor links die naar een foto leiden? Moet zoeken einde lijnen.

Verenigbaarheid

• IE7+
• Firefox
• Safari
• Opera

14.X

een(kleur:rood;)

Opnieuw gebruiken we het reguliere expressieteken “$” om het einde van de regel aan te geven. In deze zoeken we naar links die verwijzen naar jpg-bestanden, of naar URL's met ".jpg" aan het einde.

Verenigbaarheid

• IE7+
• Firefox
• Safari
• Opera

15.X

a( kleur: rood; )

Hoe kunnen we nu een CSS-selector schrijven die links naar alle soorten afbeeldingen markeert? We zouden bijvoorbeeld zo kunnen schrijven:

A, een, een, een ( kleur: rood; )

Maar dit is niet effectief. Een andere mogelijke oplossing is het gebruik van aangepaste attributen. Waarom voegen we niet ons eigen attribuut toe gegevensbestandstype in elke link?

Afbeeldingslink

EEN (kleur: rood; )

Verenigbaarheid

• IE7+
• Firefox
• Safari
• Opera

16.X

a ( kleur: rood; ) a ( rand: 1px effen zwart; )

Hier is iets speciaals. Niet iedereen kent deze CSS-selector. Met de tilde (~) kunt u een specifiek attribuut uit een door komma's gescheiden lijst met attributen markeren.

We kunnen bijvoorbeeld ons eigen data-info-attribuut instellen, dat verschillende trefwoorden bevat, gescheiden door spaties. We kunnen dus aangeven dat de link extern is en naar een afbeelding linkt.

Klik op mij

Hier is de HTML-code aanwezig, laten we nu de stijlen schrijven.

Niet slecht, toch?

Verenigbaarheid

• IE7+
• Firefox
• Safari
• Opera

17. X: gecontroleerd

invoer: aangevinkt (rand: 1px effen zwart; )

Deze pseudoklasse benadrukt alleen UI-elementen, zoals een keuzerondje of een selectievakje. Bovendien degenen die gemarkeerd/geselecteerd zijn. Heel eenvoudig.

Verenigbaarheid

• IE9+
• Firefox
• Safari
• Opera

18. X: daarna

De :before en :after pseudo-klassen zijn erg cool. Het lijkt erop dat er elke dag nieuwe manieren zijn om ze effectief te gebruiken. Ze genereren eenvoudigweg inhoud rond het geselecteerde element.

Veel mensen raakten bekend met deze pseudo-klassen tijdens het werken met de clear-fix-hack.

Clearfix:after ( inhoud: ""; weergave: blok; helder: beide; zichtbaarheid: verborgen; lettergrootte: 0; hoogte: 0; ) .clearfix ( *weergave: inline-blok; _height: 1%; )

Dit hacken gebruikt :after om een ​​spatie toe te voegen na een element en te voorkomen dat het wordt omhuld.

Volgens de CSS3-specificatie moet u twee dubbele punten (::) gebruiken. U kunt echter een enkele dubbele punt gebruiken voor compatibiliteit.

Verenigbaarheid

• IE8+
• Firefox
• Safari
• Opera

19. X: zweven

div:hover ( achtergrond: #e3e3e3; )

Wilt u een stijl op een element toepassen als u erover beweegt? Dan deze CSS-kiezer voor jou.

Houd er rekening mee dat oudere versies van Internet Explorer het volgende gebruiken: zweven alleen voor koppelingen.

Dit CSS-selector wordt vaak gebruikt om te plaatsen grens-bodem naar links wanneer er met de muis overheen wordt bewogen.

A: hover (rand-onder: 1px effen zwart; )

rand-onder: 1px effen zwart; ziet er beter uit dan tekstversiering: onderstrepen;

Verenigbaarheid

• IE6+ (In IE6: hover moet op de link worden toegepast)
• Firefox
• Safari
• Opera

20. X:niet(kiezer)

div:not(#container) ( kleur: blauw; )

De negatie-pseudoklasse kan erg nuttig zijn. Stel dat u alle div's moet selecteren, behalve degene met id = houder. De bovenstaande code zal dit afhandelen!

Of, als u alle elementen behalve p.

*:niet(p) ( kleur: groen; )

Verenigbaarheid

• IE9+
• Firefox
• Safari
• Opera

21. X::pseudo element

We kunnen pseudo-elementen gebruiken om fragmenten van elementen op te maken, zoals de eerste regel of de eerste letter. Houd er rekening mee dat ze moeten worden toegepast op elementen op blokniveau om van kracht te worden.

Een pseudo-element wordt aangegeven met twee dubbele punten: ::

Selecteer de eerste letter in de alinea

P::eerste letter ( float: links; lettergrootte: 2em; lettergrootte: vet; lettertypefamilie: cursief; opvulling rechts:2px; )

Deze code selecteert alle alinea's en selecteert op zijn beurt de eerste letters ervan en past deze stijl daarop toe.

Selecteer de eerste regel in een alinea

P::eerste regel ( lettertypegewicht: vet; lettergrootte: 1,2em; )

Op dezelfde manier stylen we met ::first-line de eerste regel in een alinea.

“Voor compatibiliteit met bestaande stijlbladen moet de browser de eerdere aanduidingen van pseudo-elementen met één dubbele punt begrijpen die zijn geïntroduceerd in CSS 1, 2 ( :eerste regel, :eerste letter, :voor en:na). Deze compatibiliteit is niet toegestaan ​​voor nieuwe pseudo-elementen die in deze specificatie zijn geïntroduceerd"

Verenigbaarheid

• IE6+
• Firefox
• Safari
• Opera

22. X:n-de kind(n)

li:nth-child(3) ( kleur: rood; )

Voorheen konden we bijvoorbeeld niet het derde onderliggende element selecteren? nde-kind lost dit op!

merk dat op nde-kind neemt een geheel getal als parameter, maar telt niet vanaf 0. Als u het tweede lijstitem wilt selecteren, gebruikt u li:n-kind(2) .

We kunnen zelfs elk vierde element van de lijst selecteren door simpelweg te schrijven (0)li:n-de-kind(4n)(/0).

Verenigbaarheid

• IE9+
• Firefox 3.5+
• Safari

23. X:n-laatste kind(n)

li:nth-laatste-kind(2) ( kleur: rood; )

Wat te doen als je een enorme lijst met items hebt ul, en hij moet het derde element vanaf het einde selecteren? In plaats van li:nth-child(397) te schrijven, kunt u gebruiken nde-laatste kind.

Deze methode is vrijwel identiek aan die hierboven, maar begint vanaf het einde.

Verenigbaarheid

• IE9+
• Firefox 3.5+
• Safari
• Opera

24. X:n-van-type(n)

ul:nth-of-type(3) ( rand: 1px effen zwart; )

Het komt voor dat u niet een onderliggend element moet selecteren, maar een element van een bepaald type.

Stel je voor dat er vijf ongeordende lijsten op een pagina staan. . Als u de stijl alleen op de derde wilt toepassen ul, die geen uniek heeft Identiteitskaart, moet gebruiken n-van-type.

Verenigbaarheid

• IE9+
• Firefox 3.5+
• Safari

25. X:n-de-laatste-van-type(n)

ul:nth-last-of-type(3) ( rand: 1px effen zwart; )

Wij kunnen ook gebruiken nde-laatste-van-type, elementen vanaf het einde tellend.

Verenigbaarheid

• IE9+
• Firefox 3.5+
• Safari
• Opera

26. X: eerste kind

ul li:eerste kind ( border-top: geen; )

Deze pseudoklasse selecteert het eerste onderliggende element. Vaak gebruikt om randen van het eerste en laatste element van een lijst te verwijderen.

Verenigbaarheid

• IE7+
• Firefox
• Safari
• Opera

27. X: laatste kind

ul > li:laatste kind ( kleur: groen; )

In tegenstelling :eerste kind:laatste kind selecteert het laatste onderliggende element.

Verenigbaarheid

• IE9 + (Ja, ja, IE8 ondersteunt:first-child , maar ondersteunt niet:last-child. Hallo Microsoft!)
• Firefox
• Safari
• Opera

28. X: enig kind

div p:enig kind ( kleur: rood; )

Je ziet deze pseudo-klasse niet vaak, maar hij bestaat toch.

Hiermee kunt u elementen selecteren die de enige onderliggende elementen zijn. Pas bijvoorbeeld de bovenstaande stijl toe op deze html-code:

Alleen p van de eerste div wordt geselecteerd omdat dit het enige onderliggende element is.

Verenigbaarheid

• IE9+
• Firefox
• Safari
• Opera

29. X: alleen van type

Een zeer interessante pseudo-klasse. Het beïnvloedt elementen die geen buren hebben binnen het bovenliggende element. Laten we als voorbeeld een ul selecteren met slechts één element in de lijst.

De enige oplossing is gebruiken alleen-van-type .

Ul > li:only-of-type ( lettertypegewicht: vet; )

Verenigbaarheid

• IE9+
• Firefox 3.5+
• Safari
• Opera

30. X: eersteklas

first-of-type selecteert het eerste element van het opgegeven type.

Laten we geven om het beter te begrijpen