De 30 CSS-väljarna du måste memorera

lär CSS: den kompletta guiden

vi har byggt en komplett guide som hjälper dig att lära dig CSS, oavsett om du precis har börjat med grunderna eller om du vill utforska mer avancerad CSS.

CSS-väljare

så du lärde dig basen id, class och descendant väljare-och kallade det sedan en dag? Om så är fallet, du miste om en enorm nivå av flexibilitet. Du är skyldig dig själv att begå dessa avancerade CSS – och CSS3-väljare till minnet.

Grundläggande Väljare

1. *

* { margin: 0; padding: 0;}

Låt oss slå ut de uppenbara, för nybörjare, innan vi går vidare till de mer avancerade väljarna.

stjärnsymbolen kommer att rikta in sig på varje enskilt element på sidan. Många utvecklare kommer att använda detta trick för att nollställa margin s och padding. Även om detta verkligen är bra för snabba tester, skulle jag råda dig att aldrig använda detta i produktionskod. Det lägger för mycket vikt på webbläsaren och är onödigt.

* kan också användas med barnväljare.

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

detta kommer att rikta varje enskilt element som är ett barn av #container div. Återigen, försök att inte använda denna teknik mycket, om någonsin.

2. # X

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

Prefixering av hashsymbolen till en väljare gör att vi kan rikta in oss på id. Detta är lätt den vanligaste användningen; dock vara försiktig när du använder id väljare.

fråga dig själv: behöver jag absolut tillämpa en id på detta element för att rikta in det?

id väljare är styva och tillåter inte återanvändning. Om möjligt, försök först använda ett taggnamn, ett av de nya HTML5-elementen eller till och med en pseudoklass.

3. .X

.error { color: red;}

detta är en class – väljare. Skillnaden mellan id s och classes är att med den senare kan du rikta in flera element. Använd classes när du vill att din styling ska tillämpas på en grupp av element. Alternativt kan du använda id s för att hitta en nål i en höstack och bara utforma det specifika elementet.

4. X

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

vad händer om du vill rikta in alla element på en sida, enligt deras type, snarare än ett id eller classnamn? Håll det enkelt och använd en typväljare. Om du behöver rikta in alla oordnade listor, använd ul {}.

live Demo av grundläggande väljare

Kombinatorväljare

5. X Y

li a { text-decoration: none;}

den näst vanligaste väljaren är descendant väljaren. När du behöver vara mer specifik med dina väljare använder du dessa. Till exempel, vad händer om, istället för att rikta in alla ankartaggar, behöver du bara rikta in ankarna som finns inom en oordnad lista? Detta är specifikt när du skulle använda en Descendant selector.

Pro-tip: om din väljare ser ut som X Y Z A B.error gör du fel. Fråga dig alltid om det är absolut nödvändigt att applicera all den vikten.

6. X + Y

ul + p { color: red;}

detta kallas en intilliggande väljare. Det kommer bara att välja det element som omedelbart föregås av det tidigare elementet. I det här fallet kommer endast första stycket efter varje ul att ha röd text.

7. X > Y

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

skillnaden mellan standarden X Y och X > Y är att den senare bara väljer direkta barn. Tänk till exempel på följande markering.

 <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>

en väljare på #container > ul kommer endast att rikta in sig på ul s som är direkta barn till div med en idav container. Det kommer inte att rikta sig till exempel ulsom är ett barn av den första li.

av denna anledning finns det prestandafördelar med att använda barnkombinatorn. Faktum är att det rekommenderas särskilt när man arbetar med JavaScript-baserade CSS-väljarmotorer.

8. X ~ Y

ul ~ p { color: red;}

denna syskonkombinator liknar X + Y, men den är mindre strikt. Medan en intilliggande väljare (ul + p) bara väljer det första elementet som omedelbart föregås av den tidigare väljaren, är den här mer generaliserad. Det kommer att välja, med hänvisning till vårt exempel ovan, alla p – element, så länge de följer en ul.

live Demo av Kombinationsväljare

Attributväljare

9. X

a { color: green;}

kallas en attributväljare, i vårt exempel ovan, kommer detta bara att välja ankartaggarna som har ett title – attribut. Ankare taggar som inte kommer inte att få denna speciella styling. Men vad händer om du behöver vara mer specifik? Kolla in nästa exempel!

10. X

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

utdraget ovan kommer att utforma alla ankartaggar som länkar till https://code.tutsplus.com; de får vår märkta gröna färg. Alla andra ankartaggar kommer att förbli opåverkade.

Observera att vi lägger in värdet i citat. Kom ihåg att också göra detta när du använder en JavaScript CSS selector engine. När det är möjligt, alltid använda CSS3 väljare över inofficiella metoder.

detta fungerar bra, även om det är lite styvt. Vad händer om länken verkligen leder till Envato Tuts+ , men kanske är vägen code.tutsplus.com istället för hela webbadressen? I dessa fall kan vi använda lite av syntaxen för reguljära uttryck.

11. X

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

där går vi; det är vad vi behöver. Stjärnan anger att förfarandevärdet måste visas någonstans i attributets värde. På så sätt täcker detta tutsplus.com, code.tutsplus.com, och även webdesign.tutsplus.com.

Tänk på att detta är ett brett uttalande. Vad händer om ankartaggen är kopplad till någon icke-Envato-webbplats med strängen tutsplus i webbadressen? När du behöver vara mer specifik, använd ^ och $ för att referera till början och slutet av en sträng.

12. X

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

någonsin undrar hur vissa webbplatser kan visa en liten ikon bredvid länkarna som är externa? Jag är säker på att du har sett dessa tidigare; de är trevliga påminnelser om att länken leder dig till en helt annan webbplats.

Detta är en cinch med karatsymbolen. Det används oftast i reguljära uttryck för att beteckna början på en sträng. Om vi vill rikta in alla ankartaggar som har en href som börjar med http, kan vi använda en väljare som liknar det utdrag som visas ovan.

Lägg märke till att vi inte söker efter https://; det är onödigt och tar inte hänsyn till webbadresserna som börjar med https://.

nu, vad händer om vi istället ville utforma alla ankare som länkar till, säg, ett foto? I dessa fall, låt oss söka efter slutet av strängen.

13. X

a { color: red;}

återigen använder vi en symbol för reguljära uttryck, $, för att hänvisa till slutet av en sträng. I det här fallet söker vi efter alla ankare som länkar till en bild—eller åtminstone en URL som slutar med .jpg. Tänk på att detta inte kommer att fånga GIF-och PNG-bilder.

14. X

a { color: red;}

hur kompenserar vi för alla olika bildtyper? Tja, vi kan skapa flera väljare, till exempel:

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

men det är en smärta, och det är ineffektivt. En annan möjlig lösning är att använda anpassade attribut. Vad händer om vi lägger till vårt eget data-filetype attribut till varje ankare som länkar till en bild?

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

sedan, med den kroken på plats, kan vi använda en standardattributväljare för att bara rikta in sig på dessa ankare.

a { color: red;}

15. X

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

här är en speciell som kommer att imponera på dina vänner. Inte för många vet om detta trick. Symbolen tilde (~) låter oss rikta in ett attribut som har en mellanslagsseparerad lista med värden.

tillsammans med vårt anpassade attribut från nummer 15 ovan kan vi skapa ett data-info attribut, som kan få en mellanslagsseparerad lista över allt vi behöver notera. I det här fallet noterar vi Externa länkar och länkar till bilder—bara för exemplet.

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

med den markeringen på plats kan vi nu rikta in alla taggar som har något av dessa värden genom att använda attributväljartricket ~.

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

ganska tjusig, va?

live Demo av attribut väljare

Pseudo väljare

16. X: besökt och X:länk

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

vi använder pseudoklassen :link för att rikta in alla ankartaggar som ännu inte har klickats på.

alternativt har vi också pseudoklassen :visited, som, som du förväntar dig, tillåter oss att tillämpa specifik styling på endast ankartaggarna på sidan som har klickats på eller ”besökt”.

17. X: markerad

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

denna pseudoklass riktar sig bara till ett element i användargränssnittet som har markerats—som en alternativknapp eller kryssruta. Det är så enkelt är det.

18. X: efter

before och after pseudoklasserna är stora. Varje dag verkar det som om människor hittar nya och kreativa sätt att använda dem effektivt. De genererar helt enkelt innehåll runt det valda elementet.

många introducerades först för dessa klasser när de stötte på clear-fix-hacket.

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

detta hack använder pseudoklassen :after för att lägga till ett mellanslag efter elementet och sedan rensa det. Det är ett utmärkt knep att ha i din verktygsväska, särskilt i de fall då overflow: hidden; – metoden inte är möjlig.

för en annan kreativ användning av detta, se mitt snabba tips om att skapa skuggor.

enligt CSS3 Selectors-specifikationen bör du tekniskt använda pseudoelementsyntaxen för två kolon ::. Men för att förbli kompatibel accepterar användaragenten också en enda kolonanvändning.

19. X: sväva

div:hover { background: #e3e3e3;}

Åh kom igen. Du vet den här. Den officiella termen för detta är ”pseudoklass för användaråtgärder”. Det låter förvirrande, men det är det verkligen inte. vill du tillämpa specifik styling när en användare svävar över ett element? Detta kommer att få jobbet gjort!

Tänk på att äldre versioner av Internet Explorer inte svarar när pseudoklassen :hover tillämpas på något annat än en ankartagg.

du använder oftast den här väljaren när du till exempel använder en border-bottom för att förankra taggar när du svävar över.

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

Pro-tip: border-bottom: 1px solid black; ser bättre ut än text-decoration: underline;.

20. X: inte (väljare)

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

negation pseudoklassen är särskilt användbar. Låt oss säga att jag vill välja alla divs, förutom den som har ett id på container. Utdraget ovan kommer att hantera den uppgiften perfekt.

eller, om jag ville välja varje enskilt element (rekommenderas inte) förutom stycketaggar, kunde vi göra:

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

21. X:: pseudoElement

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

vi kan använda pseudoelement (betecknade med ::) för att utforma fragment av ett element, till exempel första raden eller första bokstaven. Tänk på att dessa måste tillämpas på blocknivåelement för att träda i kraft.

ett pseudoelement består av två kolon: ::

rikta in den första bokstaven i ett stycke

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

detta utdrag är en abstraktion som hittar alla stycken på sidan och sedan delmål endast den första bokstaven i det elementet.

detta används oftast för att skapa tidningsliknande styling för första bokstaven i en artikel.

rikta in den första raden i ett stycke

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

på samma sätt kommer ::first-line pseudo-elementet, som förväntat, bara att formatera den första raden i elementet.

” för kompatibilitet med befintliga stilark måste användaragenter också acceptera den tidigare kolonnotationen för pseudoelement som introducerades i CSS-nivåerna 1 och 2 (nämligen, :first-line, :first-letter, :before och :after). Denna kompatibilitet är inte tillåten för de nya pseudoelementen som introduceras i denna specifikation.”- W3C Selectors SPECIFIKATIONER

live Demo av Pseudo Selectors

Nth barn-och Typväljare

22. X: n-barn (n)

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

kom ihåg de dagar då vi inte hade något sätt att rikta in specifika element i en stack? nth-child pseudoklass löser det!

Observera att nth-child accepterar ett heltal som en parameter, men detta är inte nollbaserat. Om du vill rikta in det andra listobjektet, använd li:nth-child(2).

vi kan även använda detta för att välja en variabel uppsättning barn. Till exempel kan vi göra li:nth-child(4n) för att välja var fjärde listobjekt.

23. X: n-sista barnet (n)

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

vad händer om du hade en enorm lista med objekt i en ul, och du behövde bara komma åt, säg, det tredje till sista objektet? I stället för att göra li:nth-child(397) kan du istället använda pseudoklassen nth-last-child.

denna teknik fungerar nästan identiskt med nummer 16 ovan. Skillnaden är att den börjar i slutet av samlingen och arbetar sig tillbaka.

24. X: nth-of-typ (n)

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

det kommer att finnas tillfällen då, istället för att välja en child, måste du istället välja enligt elementet type.

Föreställ dig markup som innehåller fem oordnade listor. Om du bara ville utforma den tredje ul och inte hade en unik id att ansluta till, kan du använda pseudoklassen nth-of-type(n). I utdraget ovan kommer endast den tredje ul att ha en gräns runt den.

25. X: nth-last-of-type (n)

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

och ja, för att förbli konsekvent kan vi också använda nth-last-of-type för att börja i slutet av väljarlistan och arbeta oss tillbaka för att rikta in det önskade elementet.

26. X: första barnet

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

denna strukturella pseudoklassen tillåter oss att rikta endast det första barnet av elementets förälder. Du använder ofta detta för att ta bort gränser från de första och sista listobjekten.

till exempel, låt oss säga att du har en lista med rader, och var och en har en border-topoch en border-bottom. Tja, med det arrangemanget kommer det första och sista objektet i den uppsättningen att se lite udda ut.

många designers tillämpar klasserna first och last för att kompensera för detta. Istället kan du använda dessa pseudoklasser.

27. X: last-child

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

motsatsen till first-child, last-child kommer att rikta in sig på det sista objektet i elementets överordnade.

last-child Väljareexempel

Låt oss bygga ett enkelt exempel för att visa en möjlig användning av dessa klasser. Vi skapar ett stylat listobjekt.

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

för markeringen finns det inget speciellt: bara en enkel lista.

här är 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;}

denna styling kommer att ställa in en bakgrund, ta bort webbläsarens standardpolstring på ul och tillämpa gränser för varje li för att ge lite djup.

för att lägga till djup i dina listor, applicera en border-bottom på varje lisom är en nyans eller två mörkare än li bakgrundsfärg. Använd sedan en border-top som är ett par nyanser ljusare.

det enda problemet, som visas i bilden ovan, är att en kant kommer att appliceras längst upp och ner på den oordnade listan—vilket ser udda ut. Låt oss använda pseudoklasserna :first-child och :last-child för att åtgärda detta.

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

där går vi; som fixar det!

28. X: endast-barn

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

sanningsenligt kommer du förmodligen inte att hitta dig själv med pseudoklassen only-child för ofta. Ändå är det tillgängligt, om du behöver det.

det låter dig rikta in element som är det enda barnet till sin förälder. Om du till exempel hänvisar till utdraget ovan kommer endast det stycke som är det enda barnet i div att färgas rött.

låt oss anta följande markering.

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

i det här fallet kommer de andra divpunkterna inte att riktas in; endast den första div. Så snart du tillämpar mer än ett barn på ett element upphör pseudoklassen only-child att träda i kraft.

29. X: only-of-type

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

denna strukturella pseudoklass kan användas på några smarta sätt. Det kommer att rikta element som inte har några syskon i sin överordnade Behållare. Som ett exempel, låt oss rikta alla ul s som bara har ett enda listobjekt.

först, fråga dig själv hur du skulle utföra denna uppgift. Du kan göra ul li, men detta skulle rikta alla listobjekt. Den enda lösningen är att använda only-of-type.

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

30. X: första av typen

pseudoklassen first-of-type låter dig välja de första syskonen av sin typ.

ett Test

för att bättre förstå detta, låt oss få ett test. Kopiera följande markering till din kodredigerare:

<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, utan att läsa vidare, försök att räkna ut hur man bara riktar sig till ”listobjekt 2”. När du har räknat ut det (eller gett upp), läs vidare.

lösning 1

det finns en mängd olika sätt att lösa detta test. Vi granskar en handfull av dem. Låt oss börja med att använda first-of-type.

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

detta utdrag säger i huvudsak att hitta den första oordnade listan på sidan, Hitta bara de omedelbara barnen, som är listobjekt. Filtrera sedan ner det till endast det andra listobjektet i den uppsättningen.

lösning 2

ett annat alternativ är att använda den intilliggande väljaren.

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

i det här scenariot hittar vi ul som omedelbart fortsätter p – taggen och hittar sedan det sista barnet i elementet.

lösning 3

vi kan vara så motbjudande eller så lekfulla som vi vill med dessa väljare.

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

den här gången tar vi den första ul på sidan och hittar sedan det allra första listobjektet, men börjar från botten!

live Demo av Nth Child and type Selectors

slutsats

om du kompenserar för äldre webbläsare, som Internet Explorer 6, måste du fortfarande vara försiktig när du använder dessa nyare väljare. Men låt inte det avskräcka dig från att lära dig dessa. Du skulle göra dig en stor otjänst. Var noga med att hänvisa här för en webbläsarkompatibilitetslista. Alternativt kan du använda Dean Edwards utmärkta IE9.js script för att få stöd för dessa väljare till äldre webbläsare.

för det andra, när du arbetar med JavaScript-bibliotek, som den populära jQuery, försök alltid att använda dessa inbyggda CSS3-väljare över bibliotekets anpassade metoder/väljare, när det är möjligt. Det kommer att göra din kod snabbare, eftersom väljarmotorn kan använda webbläsarens inbyggda parsning, snarare än sin egen.

det är fantastiskt att du spenderar tid på att lära dig grundläggande webbdesign, men om du behöver en snabb lösning kan en av våra färdiga CSS-mallar vara ett bra alternativ. Vi har också några PREMIUM CSS objekt för dig att överväga.

• 
  CSS3
  15 eleganta CSS prissättning tabeller för din senaste webbprojekt
  Monty Shokeen
• 
  Bootstrap 4
  18 bästa Bootstrap 4 Plugins
  Monty Shokeen

fri tillgång till Envato Elements för 1 månad

slutligen, här är ett mycket speciellt erbjudande som hjälper dig att bygga professionella webbplatser och appar. Förutom att använda dessa CSS-väljare, varför inte dra nytta av högkvalitativa stockfoton, videofilmer, premiumfonter, grafik, illustrationer och mer?

normalt måste du betala för sådana resurser. Men just nu kan du få tillgång till miljontals kreativa tillgångar för dina kodningsprojekt under en hel månad, helt gratis. Och dessutom får du obegränsade nedladdningar, så att du kan ta så mycket du vill under den månaden och bara betala om du bestämmer dig för att fortsätta!

för att dra nytta av detta erbjudande, klicka på den här speciella registreringslänken eller ange koden nedan på registreringssidan:

elements_cont_tuts-freemonth1-4bwkbp

vänta inte för länge-erbjudandet gäller endast under en begränsad tid!