De 30 CSS-Selectors die u moet onthouden

leer CSS: De Complete Guide

we hebben een complete guide gemaakt om u te helpen CSS te leren, of u nu net begint met de basis of meer geavanceerde CSS wilt verkennen.

CSS Selectors

dus je leerde de basis id, class, en descendant selectors-en dan noemde het een dag? Als dat zo is, mis je enorm veel flexibiliteit. Je bent het aan jezelf verplicht om deze geavanceerde CSS en CSS3 selectors naar het geheugen te committen.

Basisselectoren

1. *

* { margin: 0; padding: 0;}

laten we de voor de hand liggende eruit slaan, voor de beginners, voordat we verder gaan met de meer geavanceerde selectors.

het ster symbool zal zich richten op elk element op de pagina. Veel ontwikkelaars zullen deze truc gebruiken om de margins en paddinguit te schakelen. Hoewel dit zeker prima is voor snelle tests, adviseer ik je dit nooit in productiecode te gebruiken. Het voegt te veel gewicht op de browser, en is onnodig.

de * kan ook worden gebruikt met onderliggende selectors.

#container * { border: 1px solid black;}

dit zal zich richten op elk element dat een dochter is van de #container div. Nogmaals, probeer deze techniek niet te gebruiken heel veel, als ooit.

2. #X

#container { width: 960px; margin: auto;}

het voorvoegsel van het hash-symbool naar een selector laat ons toe te targeten met id. Dit is gemakkelijk het meest voorkomende gebruik; wees echter voorzichtig bij het gebruik van id selectors.

vraag uzelf af: moet ik absoluut een id op dit element toepassen om het te richten?

id selectors zijn stijf en staan hergebruik niet toe. Probeer, indien mogelijk, eerst een tagnaam te gebruiken, een van de nieuwe HTML5 elementen, of zelfs een pseudo-klasse.

3. .X

.error { color: red;}

dit is een class selector. Het verschil tussen ids en classes is dat u met deze laatste meerdere elementen kunt targeten. Gebruik classes wanneer u wilt dat uw styling wordt toegepast op een groep elementen. Als alternatief, gebruik ids om een naald in een hooiberg te vinden, en stijl alleen dat specifieke element.

4. X

a { color: red; }ul { margin-left: 0; }

wat als u alle elementen op een pagina wilt targeten volgens hun type, in plaats van een id of classnaam? Houd het eenvoudig, en gebruik een type selector. Als u alle ongeordende lijsten wilt benaderen, gebruik dan ul {}.

live Demo van basis Selectors

Combinator Selectors

5. X Y

li a { text-decoration: none;}

de volgende meest voorkomende selector is de descendant selector. Wanneer je specifieker moet zijn met je selectors, gebruik je deze. Wat als u bijvoorbeeld, in plaats van alle anker tags te targeten, alleen de ankers hoeft te targeten die zich in een ongeordende lijst bevinden? Dit is specifiek wanneer je een afstammeling selector zou gebruiken.

Pro-tip: als uw selector eruit ziet als X Y Z A B.error, doet u het verkeerd. Vraag jezelf altijd af of het absoluut noodzakelijk is om al dat gewicht toe te passen.

6. X + Y

ul + p { color: red;}

dit wordt een aangrenzende selector genoemd. Het selecteert alleen het element dat onmiddellijk wordt voorafgegaan door het eerste element. In dit geval zal alleen de eerste alinea na elke ul rode tekst hebben.

7. X > Y

div#container > ul { border: 1px solid black;}

het verschil tussen de standaard X Y en X > Y is dat de laatste alleen directe kinderen selecteert. Overweeg bijvoorbeeld de volgende opmaak.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

een selector van #container > ul richt zich alleen op de uls die directe kinderen zijn van de div met een id van container. Het zal bijvoorbeeld niet gericht zijn op de ul die een kind is van de eerste li.

daarom zijn er prestatievoordelen bij het gebruik van de child combinator. In feite, het is vooral aanbevolen bij het werken met JavaScript-gebaseerde CSS selector engines.

8. X ~ Y

ul ~ p { color: red;}

deze combinator is vergelijkbaar met X + Y, maar is minder streng. Terwijl een aangrenzende selector (ul + p) alleen het eerste element selecteert dat onmiddellijk wordt voorafgegaan door de vorige selector, is deze meer gegeneraliseerd. Het selecteert, verwijzend naar ons voorbeeld hierboven, alle p elementen, zolang ze een ulvolgen.

Live Demo van Combinator Selectors

attribuut Selectors

9. X

a { color: green;}

aangeduid als een attributen selector, in ons voorbeeld hierboven, selecteert dit alleen de anker tags die een title attribuut hebben. Anker tags die niet zullen deze specifieke styling niet ontvangen. Maar wat als je specifieker moet zijn? Bekijk het volgende voorbeeld!

10. X

a { color: #83b348; /* Envato green */}

het fragment hierboven zal alle anker-tags stijl geven die linken naar https://code.tutsplus.com; ze krijgen onze groene kleur. Alle andere anker tags blijven onaangetast.

merk op dat we de waarde tussen aanhalingstekens stoppen. Vergeet niet om dit ook te doen bij het gebruik van een JavaScript CSS selector engine. Gebruik, indien mogelijk, altijd CSS3 selectors over Onofficiële methoden.

dit werkt goed, hoewel het een beetje stijf is. Wat als de link inderdaad direct naar Envato Tuts+, maar misschien is het pad code.tutsplus.com in plaats van de volledige URL? In die gevallen kunnen we een beetje van de reguliere expressies syntaxis gebruiken.

11. X

a { color: #83b348; /* Envato green */}

daar gaan we; dat is wat we nodig hebben. De ster geeft aan dat de voortgangswaarde ergens in de waarde van het attribuut moet staan. Op die manier dekt dit tutsplus.com, code.tutsplus.com, en zelfs webdesign.tutsplus.com.

Houd er rekening mee dat dit een brede verklaring is. Wat als de anker tag gekoppeld aan een niet-Envato site met de string tutsplus in de URL? Wanneer u specifieker moet zijn, gebruikt u ^ en $ om respectievelijk het begin en het einde van een tekenreeks te refereren.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

ooit afgevraagd hoe sommige websites in staat zijn om een klein pictogram weer te geven naast de links die extern zijn? Ik weet zeker dat je deze eerder hebt gezien; ze zijn leuke herinneringen dat de link u naar een heel andere website zal leiden.

dit is een cinch met het karaat symbool. Het wordt het meest gebruikt in reguliere expressies om het begin van een string aan te duiden. Als we alle anker tags willen targeten die een href hebben die begint met http, kunnen we een selector gebruiken die vergelijkbaar is met het fragment hierboven.

merk op dat we niet zoeken naar https://; dat is niet nodig, en houdt geen rekening met de URL ‘ s die beginnen met https://.

nu, wat als we in plaats daarvan alle ankers willen stylen die naar bijvoorbeeld een foto linken? In die gevallen, laten we zoeken naar het einde van de string.

13. X

a { color: red;}

opnieuw gebruiken we een symbool voor reguliere expressies, $, om naar het einde van een tekenreeks te verwijzen. In dit geval zoeken we naar alle ankers die naar een afbeelding linken—of op zijn minst een URL die eindigt op .jpg. Houd er rekening mee dat dit geen GIF-en PNG-afbeeldingen zal vastleggen.

14. X

a { color: red;}

hoe compenseren we alle verschillende afbeeldingstypen? We kunnen meerdere selectors maken, zoals:

a,a,a,a { color: red;}

maar dat is een pijn, en het is inefficiënt. Een andere mogelijke oplossing is om aangepaste attributen te gebruiken. Wat als we ons eigen data-filetype attribuut toevoegen aan elk anker dat naar een afbeelding linkt?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

dan, met die haak op zijn plaats, kunnen we een standaard attributen selector gebruiken om alleen die ankers te targeten.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

hier is een speciale die indruk zal maken op uw vrienden. Niet veel mensen weten van deze truc. Met het tilde (~) symbool kunnen we een attribuut targeten dat een door spaties gescheiden lijst van waarden heeft.

samen met ons aangepaste attribuut van nummer 15 hierboven, kunnen we een data-info attribuut aanmaken, dat een door spaties gescheiden lijst kan ontvangen van alles wat we moeten noteren. In dit geval maken we nota van externe links en links naar afbeeldingen—alleen voor het voorbeeld.

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

met die opmaak kunnen we nu alle tags targeten die een van deze waarden hebben, met behulp van de ~ attributen selector Truc.

/* Target data-info attr that contains the value "external" */a { color: red;}/* And which contain the value "image" */a { border: 1px solid black;}

behoorlijk handig, hè?

live Demo van Attribuutselectors

Pseudo-Selectors

16. X: bezocht en X:link

a:link { color: red; }a:visited { color: purple; }

we gebruiken de :link pseudo-klasse om alle anker tags te targeten waarop nog moet worden geklikt.

als alternatief hebben we ook de :visited pseudo klasse, die, zoals je zou verwachten, ons toestaat om specifieke styling toe te passen op alleen de anker tags op de pagina waarop is geklikt, of “bezocht”.

17. X: checked

input:checked { border: 1px solid black;}

deze pseudo-klasse richt zich alleen op een element van de gebruikersinterface dat is aangevinkt-zoals een keuzerondje of keuzevakje. Zo simpel is het.

18. X: na

zijn de pseudo-klassen before en after groot. Elke dag, zo lijkt het, vinden mensen nieuwe en creatieve manieren om ze effectief te gebruiken. Ze genereren gewoon inhoud rond het geselecteerde element.

velen werden voor het eerst geïntroduceerd in deze klassen toen ze de clear-fix hack tegenkwamen.

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; }.clearfix { *display: inline-block; _height: 1%;}

deze hack gebruikt de :after pseudo-klasse om een spatie na het element toe te voegen en deze vervolgens te wissen. Het is een uitstekende truc om in je gereedschapstas te hebben, vooral in de gevallen waarin de overflow: hidden; methode niet mogelijk is.

voor een ander creatief gebruik van dit, refereer je naar mijn snelle tip over het creëren van schaduwen.

volgens de CSS3 Selectors specificatie, moet je technisch de pseudo element syntaxis van twee dubbele punten ::gebruiken. Echter, om compatibel te blijven, de user-agent zal accepteren een enkele dubbele punt gebruik ook.

19. X: beweeg

div:hover { background: #e3e3e3;}

Oh kom op. Deze ken je. De officiële term hiervoor is “user action pseudo class”. Het klinkt verwarrend, maar dat is het echt niet. wilt u een specifieke styling toepassen wanneer een gebruiker over een element zweeft? Dit zal de klus klaren!

Houd er rekening mee dat oudere versies van Internet Explorer niet reageren wanneer de :hover pseudo-klasse wordt toegepast op iets anders dan een anker-tag.

u zult deze selector het vaakst gebruiken wanneer u bijvoorbeeld een border-bottom toepast op anker-tags, wanneer u eroverheen zweeft.

a:hover { border-bottom: 1px solid black;}

Pro-tip: border-bottom: 1px solid black; ziet er beter uit dan text-decoration: underline;.

20. X: niet (selector)

div:not(#container) { color: blue;}

de negatie pseudo klasse is bijzonder nuttig. Laten we zeggen dat ik alle divs wil selecteren, behalve degene die een id van containerheeft. Het fragment hierboven zal die taak perfect af te handelen.

of, als ik elk element wilde selecteren (niet geadviseerd) behalve voor alinea-tags, zouden we:

*:not(p) { color: green;}

21. X:: pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

we kunnen pseudo-elementen (aangeduid door ::) gebruiken om fragmenten van een element te stylen, zoals de eerste regel of de eerste letter. Houd er rekening mee dat deze moeten worden toegepast op blokniveau elementen om van kracht te worden.

een pseudo-element bestaat uit twee dubbele punten: ::

Target de eerste Letter van een alinea

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

dit fragment is een abstractie die alle alinea ‘ s op de pagina zal vinden, en dan sub-target alleen de eerste letter van dat element.

dit wordt meestal gebruikt om een krantachtige styling te maken voor de eerste letter van een artikel.

richten op de eerste regel van een alinea

p::first-line { font-weight: bold; font-size: 1.2em;}

evenzo zal het ::first-line pseudo-element, zoals verwacht, alleen de eerste regel van het element stijl geven.

” voor compatibiliteit met bestaande typogrammen moeten gebruikersagenten ook de vorige één-dubbele notatie accepteren voor pseudo-elementen die in CSS-niveaus 1 en 2 zijn geïntroduceerd (namelijk, :first-line, :first-letter, :before en :after). Deze compatibiliteit is niet toegestaan voor de nieuwe pseudo-elementen die in deze specificatie zijn geïntroduceerd.”- W3C Selectors Specs

Live Demo van Pseudo Selectors

Nth Child en Type Selectors

22. X: nde-kind (n)

li:nth-child(3) { color: red;}

herinner je je de dagen dat we geen manier hadden om specifieke elementen in een stack te richten? De nth-child pseudo-klasse lost dat op!

houd er rekening mee dat nth-child een geheel getal als parameter accepteert, maar dit is niet gebaseerd op nul. Als u het tweede lijstitem wilt targeten, gebruik dan li:nth-child(2).

we kunnen dit zelfs gebruiken om een variabele set kinderen te selecteren. We kunnen bijvoorbeeld li:nth-child(4n) doen om elk vierde lijstitem te selecteren.

23. X: n-de-laatste-kind (n)

li:nth-last-child(2) { color: red;}

wat als u een enorme lijst met items in een ul had, en u alleen het derde tot laatste item hoefde te openen? In plaats van li:nth-child(397) te doen, kunt u de pseudo-klasse nth-last-child gebruiken.

deze techniek werkt bijna identiek aan Nummer 16 hierboven. Het verschil is dat het begint aan het einde van de collectie, en werkt zijn weg terug.

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

ul:nth-of-type(3) { border: 1px solid black;}

er zullen momenten zijn waarop u, in plaats van een child te selecteren, in plaats daarvan moet selecteren volgens de type van het element.

stel je markup voor die vijf ongeordende lijsten bevat. Als je alleen de derde ul wilt stylen, en geen unieke id hebt om in te haken, kun je de nth-of-type(n) pseudo klasse gebruiken. In het fragment hierboven heeft alleen de derde ul een rand eromheen.

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

ul:nth-last-of-type(3) { border: 1px solid black;}

en ja, om consistent te blijven, kunnen we ook nth-last-of-type gebruiken om aan het einde van de selectielijst te beginnen en terug te werken naar het gewenste element.

26. X: first-child

ul li:first-child { border-top: none;}

deze structurele pseudo-klasse stelt ons in staat om alleen het eerste kind van de ouder van het element te targeten. U zult dit vaak gebruiken om randen van de eerste en laatste lijst items te verwijderen.

bijvoorbeeld, stel dat je een lijst met rijen hebt, en elke rij heeft een border-top en een border-bottom. Nou, met die regeling, zal het eerste en laatste item in die set er een beetje vreemd uitzien.

veel ontwerpers passen klassen van first en last toe om dit te compenseren. In plaats daarvan kunt u deze pseudo-klassen gebruiken.

27. X: last-child

ul > li:last-child { color: green;}

het tegenovergestelde van first-child, last-child zal gericht zijn op het laatste item van de ouder van het element.

last-child Selector voorbeeld

laten we een eenvoudig voorbeeld bouwen om een mogelijk gebruik van deze klassen te demonstreren. We maken een lijst item.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

voor de opmaak is er niets bijzonders: slechts een eenvoudige lijst.

hier is de CSS:

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;}li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;}

deze opmaak stelt een achtergrond in, verwijdert de browser standaard padding op de ul, en past randen toe op elke li om een beetje diepte te geven.

om diepte aan uw lijsten toe te voegen, moet u een border-bottom toepassen op elke li die een tint of twee donkerder is dan de achtergrondkleur van li. Pas vervolgens een border-top toe die een paar tinten lichter is.

het enige probleem, zoals weergegeven in de afbeelding hierboven, is dat een rand zal worden toegepast op de bovenste en onderste van de ongeordende lijst—wat er vreemd uitziet. Laten we de :first-child en :last-child pseudo klassen gebruiken om dit op te lossen.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

daar gaan we; dat lost het!

28. X: only-child

div p:only-child { color: red;}

eerlijk gezegd zult u waarschijnlijk niet merken dat u de only-child pseudo-klasse te vaak gebruikt. Toch is het beschikbaar, mocht u het nodig hebben.

Hiermee kunt u elementen targeten die de enige dochter van zijn ouder zijn. Als u bijvoorbeeld naar het fragment hierboven verwijst, wordt alleen de alinea die het enige kind van de div is rood gekleurd.

laten we de volgende opmaak aannemen.

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

in dit geval worden de tweede div’s alinea’ s niet bestreken; alleen de eerste div. Zodra u meer dan één kind op een element toepast, wordt de pseudo-klasse only-child niet meer van kracht.

29. X: only-of-type

li:only-of-type { font-weight: bold;}

deze structurele pseudoklasse kan op een aantal slimme manieren worden gebruikt. Het zal zich richten op elementen die geen broers en zussen hebben in de ouder container. Als voorbeeld, laten we alle uls targeten die slechts één lijstitem hebben.

vraag uzelf eerst af hoe u deze taak zou volbrengen. U kunt ul li doen, maar dit zou op alle lijstitems gericht zijn. De enige oplossing is only-of-typete gebruiken.

ul > li:only-of-type { font-weight: bold;}

30. X: first-of-type

met de pseudo-klasse first-of-type kunt u de eerste broers en zussen van het type selecteren.

een Test

om dit beter te begrijpen, laten we een test doen. Kopieer de volgende opmaak naar uw code-editor:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

nu, zonder verder te lezen, proberen om erachter te komen hoe alleen te richten “lijst Item 2”. Als je het hebt uitgevogeld (of opgegeven), lees dan verder.

oplossing 1

deze test kan op verschillende manieren worden opgelost. We zullen er een paar bekijken. Laten we beginnen met first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

dit fragment zegt in wezen, om de eerste ongeordende lijst op de pagina te vinden, zoek dan alleen de directe kinderen, die lijst items zijn. Filter dat vervolgens naar beneden naar alleen het tweede lijstitem in die set.

oplossing 2

een andere optie is om de aangrenzende selector te gebruiken.

p + ul li:last-child { font-weight: bold;}

In dit scenario vinden we de ul die onmiddellijk de p tag voortbrengt, en dan vinden we het allerlaatste kind van het element.

Oplossing 3

we kunnen zo onaangenaam of zo speels zijn als we willen met deze selectors.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

deze keer pakken we de eerste ul op de pagina, en dan vinden we het allereerste lijstitem, maar vanaf de onderkant!

Live Demo van Nth Child en Type Selectors

conclusie

als u compenseert voor oudere browsers, zoals Internet Explorer 6, moet u nog steeds voorzichtig zijn bij het gebruik van deze nieuwere selectors. Maar laat dat je er niet van weerhouden om deze te leren. Je zou jezelf een slechte dienst bewijzen. Zorg ervoor dat u hier voor een browser-compatibiliteitslijst verwijzen. Als alternatief kun je Dean Edward ‘ s uitstekende IE9 gebruiken.js script om ondersteuning voor deze selectors naar oudere browsers te brengen.

ten tweede, wanneer u werkt met JavaScript-bibliotheken, zoals de populaire jQuery, probeer dan altijd deze native CSS3-selectors te gebruiken over de aangepaste methoden/selectors van de bibliotheek, indien mogelijk. Het zal uw code sneller te maken, als de selector engine native parsing van de browser kan gebruiken, in plaats van zijn eigen.

het is geweldig dat je tijd besteedt aan het leren van webdesign fundamentals, maar als je een snelle oplossing nodig hebt, kan een van onze kant-en-klare CSS-sjablonen een goede optie zijn. We hebben ook een paar premium CSS items voor u om te overwegen.

• 
  CSS3
  15 Elegante CSS Prijzen Tafels voor Uw nieuwe Web-Project
  Monty Shokeen
• 
  Bootstrap 4
  18 Beste Bootstrap 4 Plugins
  Monty Shokeen

Gratis Toegang tot Envato Elementen voor 1 Maand

Eindelijk, hier is een speciale aanbieding om u te helpen bij het bouwen van professionele websites en apps. Naast het gebruik van deze CSS-selectors, waarom niet profiteren van hoogwaardige stockfoto ‘ s, videobeelden, premium lettertypen, afbeeldingen, illustraties, en meer?

normaal zou je voor zulke middelen moeten betalen. Maar op dit moment, kunt u toegang krijgen tot miljoenen creatieve activa voor uw codering projecten voor een hele maand, volledig gratis. En wat meer is, krijg je onbeperkt downloads, zodat je kunt grijpen zo veel als je wilt tijdens die maand, en alleen betalen als je besluit om door te gaan!

om van deze aanbieding te profiteren, klikt u op deze speciale aanmeldlink of voert u de onderstaande code in op de registratiepagina:

elements_cont_tuts-freemonth1-4bwkbp

wacht niet te lang—de aanbieding is slechts voor een beperkte tijd geldig!