Idag ska vi lära oss om Attributväljare. Vad är dem? Hur använder jag dem? Vilka är de nya CSS3 Attribut väljare? Vi svarar på dessa frågor och mer.
HTML-attribut
Innan jag presenterar dig för konceptet CSS-attributväljare, borde du veta vad en HTML-attribut är. Den goda nyheten är, du är redan bekant med flera av dem: klass, id, stil, och href till exempel. Det finns massor mer, kolla in W3.org för en komplett lista.
CSS gör styling några attribut lätt. Till exempel, om vi vill stila en id eller klass, vi använder bara följande.
Det här är bra och bra, men vad händer om vi vill stila några andra attribut? Det här är där attribut väljare kommer in i spel.
Attributväljare
Som vi just lärt oss, är attribut väljare precis vad de låter som, ett sätt att välja och rikta specifika attribut med hjälp av CSS. Det här är faktiskt väldigt enkelt att göra och involverar bara en uppsättning parentes som innehåller den HTML som du använde. Låt oss se hur det här fungerar genom att titta först på några grundläggande HTML.
Låt oss säga att jag ville rikta in och utforma endast Design Shack-länken. Jag skulle kunna använda pseudo-selektorer, men det förutsätter att listan förblir i den ordningen och webbläsarsupport är inte det bästa. I stället kan vi använda en attributväljare för att rikta den specifika? Href? som vi är intresserade av.
Upprepande attribut
Ett annat exempel som används mycket är en lista över kontakter, en eller flera av dem ska utformas på ett visst sätt. Att använda attribut kan vi skilja mellan vänner och kontakter.
Vi kan sedan gå in och utforma var och en av dessa rel attribut annorlunda med samma syntax som ovan. På samma sätt som i en klass kan flera objekt uppfylla kriterierna i en deklaration.
Med hjälp av denna kod kan vi nå resultaten nedan. Observera att även om vi börjar lägga till nya kontakter överst i listan, kommer dessa väljare fortfarande att arbeta där : N: te-barn skulle inte. Ganska coolt? Dessutom, nästan alla aktuella webbläsare stöder dessa, inklusive IE tillbaka till version 7!
Det är också viktigt att notera att du inte behöver vara så specifik. Följande kommer stil några element med a rel attribut applicerat.
Hantering av flera värden
Den knepiga delen om att använda Attributväljare är att de blir lite roliga när det finns flera attribut. Tänk på följande tweak till vår tidigare lista.
Du skulle tro att styling det första listobjektet skulle vara samma process med tanke på att det fortfarande har? Vän? i det, men det är inte fallet. Att bara använda = 'Vän' kommer inte att rikta in sig på det här längre. Istället måste vi använda följande, som letar efter? Vän? som en av de rel värden.
Detta kommer att resultera i? Larry? listobjekt med fetstil var som tidigare en [rel = 'vän'] syntaxen skulle ha missat det.
CSS3 Attribut Väljare
CSS3 har gett oss så många coola nya leksaker och verktyg att leka med. Det är ingen överraskning då det också finns några nya Attributväljare som hjälper oss att ge ännu mer specificitet i vår inriktning. Låt oss börja med min favorit.
Styling liknande namngivna attribut
Det är här saker blir fantastiska. Låt oss säga att du hade följande HTML och att du bara ville rikta in sig till upperSection och lowerSection, hur skulle du göra det?
Ett enkelt svar är den nya? Valfri Substring Attribut Värdesväljare ?, eller? Den riktigt coola lilla asterisken.? Eftersom de två delarna som vi vill rikta in båda innehåller? Sektion? I deras namn kan vi enkelt rikta dem.
Jag blev blåst bort av detta. Här använder vi CSS för att faktiskt gräva genom våra ID-namn för att hitta specifika värden inom ett större namn och rikta in dessa element. Det ger många möjligheter och gör komplicerad inriktning med liten markup en mycket lättare uppgift.
Börja och avsluta
Medan valfri väljare för godtycklig Substring Attribut kommer att rikta sig till en viss sträng var som helst, tillåter start- och slutversionerna att sällsynta fall hanteras där du bara vill att det första eller sista objektet ska övervägas.
Låt oss säga att vi vill rikta alla stooges, vilket gör Larry och Moe röd och lockig gul. För att göra detta kan vi infoga användning [Title ^ = 'nickedocka'] att fånga alla de med "stooge"? som det första ordet och [Title $ = 'nickedocka'] att fånga alla de med "stooge"? som sista ordet.
Chaining Attribut Selectors
Låt oss säga att du vill bli superspecifik och lägga till på flera kriterier. Det är lika enkelt som att kombinera flera attribut väljare. Låt oss se hur det här fungerar med HTML-koden nedan.
Låt oss nu rikta någon länk med? Stooge? i titeln, men bara de som börjar med? the ?.Observera att vi inte vill oavsiktligt rikta? eftersom det också visas i den sista föremålet. Här är syntaxen för att uppnå detta:
Enkel rätt? Allt vi gjorde var att ta de två reglerna som vi behövde och placera dem på samma rad. Det är viktigt att notera att detta inte är ett eller ett scenario men en både / och. Endast de objekt som uppfyller båda kriterierna kommer att ändras.
Vidare läsning
Om du är tillräckligt med en nörd som du bara älskar attributväljare, finns det ytterligare två källor som jag starkt rekommenderar att du kolla in.
CSS Tricks
För det första har Chris Coyier en mycket grundlig introduktion till CSS Tricks som täcker mycket av samma innehåll som vi täckte här. Chris är en CSS super geni men och förmodligen förklarar dem mycket bättre än jag!
Boken av CSS3
Nästa, kolla in Peter Gasstons bok CSS3, som har varit min huvudsakliga referens för alla saker CSS3 nyligen. Jag kan helt enkelt inte få nog av den här boken och har gett den ganska permanent positionen på mitt skrivbord! Gasston lägger till denna konversation med en diskussion om General and Adjacent Sibling Combinators, vilket är ett annat intressant sätt att rikta vissa element. Ta följande HTML som ett exempel:
Nu, låt oss säga att vi ville bara rikta på? Välj mig !? paragraf. Den intilliggande syskonkombinationen låter oss göra just det. Följande kod riktar sig till någon p taggarna föregås genast av en h1 märka. Det finns bara en av dessa i exemplet ovan (första stycket efter rubriken).
På samma sätt tillåter General Sibling Combinator oss att rikta in sig Allt av p taggar som kommer efter rubriken. Så det första stycket kommer inte att ändra färg, men alla andra kommer.
Det här är bara en smak, för mer information om dessa, kolla boken CSS3.
Browser Support
Som jag nämnde kort ovan, så långt som jag kan säga, är du ganska täckt av de flesta av dessa tekniker tillbaka till IE7 med alla större Nuvarande webbläsare rockar perfekt stöd. Men det är inte precis ett helt poäng över hela linjen, med några av de mindre kända webbläsarna som är lite spottiga. Du kan hitta ett trevligt litet bord med webbläsare och deras stöd för alla dessa saker och mer på dev.l-c-n.com.
Slutsats
För att vara ärlig visste jag väldigt nyligen lite om ingenting om CSS-attributväljare. Efter lite forskning var jag otrolig av hur cool de är och förvirrade över varför de verkar vara så sällsynta (webbläsarsupport är bättre än för många saker vi rysar med). Med bara en liten bit av kod kan du uppnå anmärkningsvärt specifika inriktningar med lite eller ingen ytterligare markering krävs.
Lämna en kommentar och låt mig veta vad du tycker om attributväljare och huruvida du någonsin använder dem!