div> p + div [id * = 'header'] - Om du såg denna jumbled röra av väljare i någon CSS, kan du dechiffrera den?
Om inte, då vill du läsa denna primer på funky CSS-selektorer som du borde veta!
En bristfällig utbildning
Precis som många självlärda CSS-killar, var min utbildning cobbled tillsammans från en miljon olika källor. Jag läste artiklar, följde tutorials och experimenterade tills mitt huvud skadades för att komma till en punkt där jag kunde bryta ut en komplex layout och uppnå den stil som jag vill ha utan för mycket besvär.
Men med tiden började jag långsamt inse att jag saknade en ordentlig förståelse för ett av de grundläggande, grundläggande förutsättningarna för att arbeta med CSS: väljare. Visst visste jag hur man riktar in en klass, ett ID eller en länk, men jag skulle ofta se kodstycken med väljare som verkade helt främmande för mig.
Efter att ha skrivit ut dessa förvirrande kodningspraxis så länge bestämde jag mig för att verkligen sitta ner och lära mig om CSS-valörer. Det förändrade inte bara hur jag kodar, det har hjälpt mig att tolka och lära av CSS som andra skriver.
Jag är verkligen inte den första som skriver om CSS-valörer och den här artikeln kommer inte att lägga till något som är revolutionärt för diskussionen. Men om du är som mig, en självlärd kodare med en fläckig utbildning, då kan det bara vara artikeln som förtydligar några av dina största förvirringar när du stirrar i undran på andras kryptiska kod.
Möt familjen
Innan du lär dig om komplexa CSS-väljare. Du behöver förstå några saker om HTML-hierarkin. Du har hört dessa termer som slängts innan men det är dags att verkligen tänka på dem och se till att du förstår hur de fungerar.
Hur vi förklarar och hänvisar till strukturen i ett HTML-dokument är att använda metaforen för ett släktträd. Det finns föräldrar, barn, syskon, ättlingar och förfäder. För att se vad som betyder, låt oss använda den enkla koden nedan.
Vår div innehåller två stycken element och ett ankare. Allt av dessa är ättlingar av div, som upptar rotpositionen i detta fall. Ett barn är en direkt efterkommande av en förälder. Så i exemplet ovan är båda stycken barn av div men ankaren är inte. I stället är det ett barn i andra stycket.
På samma sätt, om vi går tillbaka upp i trädet, har div ett annorlunda förhållande till objekten. Diven är förälder till styckeetiketterna men en ankare för ankaremärket.
Det sista förhållandet är det för syskonen, även känd som angränsande syskon. Precis som i din familj delar syskon en förälder. Så i exemplet ovan är de två styckena syskon eftersom föräldern till båda elementen är div. Ankaren har inga syskon eftersom det är styckeets enda barn.
Förstod det?
Familjemetafören kan bli riktigt förvirrande, men bara om du överdriver det. Terminologin är ganska intuitiv och om du tänker på ordets bokstavliga mening kan du ganska gissa vad det betyder i HTML-termer.
Om du fortfarande behöver lite mer förtydligande, låt oss skriva om exemplet ovan med innehåll som förklarar hierarkin för varje element.
Barnväljaren
Nu när vi förstår hur HTML fungerar kan vi starta vår diskussion av CSS-väljare, som utnyttjar detta system. Beväpnad med vår kunskap om vad ett HTML-barn verkligen är, kan vi titta på CSS-barnväljaren.
Barnväljaren representeras av större än symbolen:?> Var13 -> ?. Du har sett det här i CSS innan men kanske inte kan förstå hur det fungerar.
Detta uttalande tar stycketiketterna som är dividens barn och blir dem blåa. Observera att det bara fungerar för barn av den div, inte nödvändigtvis alla efterkommande. Låt oss utforska detta vidare med följande exempel.
Låt oss säga för en del hemsk anledning att vi ville ändra den länka färgen till gult. Självklart kan vi rikta in länken på några sätt, men vi försöker lära oss om barnväljaren så gå med mig. Låt oss se vad som händer om vi implementerar denna CSS:
Whoops, det förändrade inte någonting! Det beror på att länken inte är ett barn av div, det är ett barn i stycket. Så om vi ändrar den koden för att rikta oss till några ankare som är barn av stycken, uppnår vi vårt mål.
Ordning
Nu när du förstår hur barnväljaren fungerar, kom ihåg att, som med alla CSS, gör ordern stor skillnad. För att illustrera detta, låt oss börja med den här grundläggande HTML-strukturen:
Låt oss nu överväga följande två CSS-fragment. De ser lika ut, men är väldigt olika!
Det första stycket, gör alla stycken röda, och ändrar bara barnen i rot-div till blå.
Det andra stycket gör motsatsen, det riktar sig inledningsvis till den första divens barnparagraf och förvandlar dem till blått men ändras sedan Allt av styckena till röda. Detta resulterar givetvis i tre röda stycken.
Det andra exemplet bryter mot en viktig regel i CSS: gå från generell till specifik, inte tvärtom.Sedan vi började med en specifik väljarkonfiguration som endast insåg två stycken och sedan flyttades till en allmän väljare som riktade alla stycken, nådde den andra helt den första!
kedja
Om du verkligen vill gå nötter kan du köra barnväljare tillsammans. I det följande exemplet riktade jag första gången på några barns paragrafer i example3 div och ändrade dem till blått, sedan riktade jag på några stycken som var divisjonsbarn som var också barn av en annan div och ändrade dem till rött.
Den närliggande syskonvalet
Med barnväljare är alla kvadrade borta vi behöver lära oss hur vi ska rikta syskon. Den intilliggande syskonväljaren representeras av plus-symbolen:? + ?. Med det kan vi rikta oss mot alla element som är syskon till något annat element. Här är ett exempel:
I vår CSS använde vi den närliggande syskonväljaren, som ändrade andra och tredje stycket till rött. Det här är väldigt knepigt är det inte? instinktivt, vi förväntar oss att den första stycket också ska vara röd. Trots allt är första stycket på samma nivå av trädet som de närmaste två och har syskon. Denna väljare gäller emellertid endast för element som föregås av något annat. I det här fallet kommer endast de stycken som föregås direkt av en syskonpost att riktas. Första stycket i listan föregås av div, så det ändras inte.
Med detta i åtanke skulle följande kod ändra bakgrunden för den kapslade diven till grå eftersom det verkligen föregås av en punkt.
Ytterligare kedja
Precis som hos barnväljare kan du kedja närliggande syskonväljare. Systemet fungerar exakt som tidigare. Du kan också kombinera de två för ett komplicerat komplicerat skikt. Här är där vår CSS verkligen börjar se konstig ut.
I det här exemplet riktade vi till punkter som var barn av divs som också föregicks direkt av en annan punkt.
Den allsmäktiga stjärnan
Det sista stycket förvirrande CSS som jag vill gå över är det värsta än: asterisken. Visste du att, beroende på sammanhanget, kan stjärnan referera till två helt olika saker?
Universalväljare
Det första exemplet på en asterisk i CSS är den som du förmodligen är mest bekant med: universalväljaren. Sannt mot sitt namn, den här väljaren riktar sig till varje element på sidan. Vi brukar se den som används i CSS-återställningar. Följande återställer vaddering och marginal på varje element.
Du kan ta detta vidare och uppnå några riktigt intressanta resultat. Till exempel blir följande varje element inuti en div röd, detta inkluderar objekt som länkar som har en standardfärg som är inställd på något annat och inte påverkas genom att helt enkelt rikta in div.
Vidare riktar sig detta stycke barnbarnsdelar i div, men inte direkt barns stycken.
Du kan ta detta så långt du vill, det följande riktade sig till de stora barnbarnen från div. Du kan se den här kedjemetoden som används ofta i CSS-felsökningstekniker.
Godtycklig Substring Attribut Värdesväljare
Nu med CSS3 kan asterisken också användas för att implementera den godtyckliga substring attributvärdesväljaren. Du kan dra ut den här titeln när du pratar med andra utvecklare om du försöker se smart ut.
Följande kod riktar sig till div med ordet? i titeln. Det kan vara? Section3? eller? Section-Four?, spelar ingen roll så länge den innehåller den angivna strängen, gäller följande stilar.
Denna kod skulle gälla för alla delarna i denna HTML:
Attributväljare
Den sista kurvan som jag kastade dig var ett exempel på en attributväljare. I CSS3 är attribut väljare så komplicerade att de förtjänar sin egen artikel! Lyckligtvis för dig har vi en del på det här ämnet.
CSS Attribut Selectors: Hur och varför ska du använda dem
Om du är en nörd som jag är det här ett riktigt fascinerande ämne. Det är fantastiskt att se alla de valverktyg som du har till ditt förfogande.
Pseudoklassmarkörer
Detta är ännu ett valämne som du bör bekanta dig med, och än en gång gör det verkligen en grundlig inspektion av ämnet. Som med nästan alla CSS-ämnen som man känner till, har du täckt CSS-Tricks.
Möt Pseudoklassmarkörerna
Slutsats
Med CSS finns det nästan alltid mer än ett sätt att rikta något. Faktum är att det ofta är ett halvt dussin sätt. För något av exemplen ovan kan du noga namnge ett snabbare sätt att rikta det vi skjuter på, men när du bekantar dig med DOM, börjar dessa väljare verkligen komma till nytta.
Även om du aldrig befinner dig i behov av dem är det mycket viktigt att förstå dem eftersom du kommer se dem projekt som du samarbetar med, ramar som du laddar ner, handledning som du läser och någon annan plats som du regelbundet hittar kod. Att förstå HTML-elementrelationer och deras motsvarande CSS-väljare kan bara göra dig till en bättre kodare!