CSS3 Attributväljare Targeting File Type

Denna artikel är en del av vår "HTML5 / CSS3 Tutorials-serien" - dedikerad till att göra dig till en bättre designer och / eller utvecklare. Klicka här att se fler artiklar från samma serie.

De attribut väljare är en väldigt användbar funktion för att välja ett element utan att lägga till överflödig id eller klasser. Så länge som det inriktade elementet har ett attribut som href, src och typ vi behöver inte göra det.

Attributväljare har faktiskt funnits sedan CSS 2.1, och nu med några fler typer av attributväljare som läggs till i CSS3-specifikationerna, kan vi rikta in elementets attribut ännu tydligare.

Och i det här inlägget kommer vi att använda en av syntaxen för att välja filtyp som infogas som en del av attributets värde.

Syntax och Browser Support

De filtyp är alltid i slutet av filnamnet. Så, för att välja det filtyp vi kan använda följande syntax [Attr $ = "värde"]. Denna syntax använder $ = operatör som kommer att rikta slutet på attributvärdet, till exempel:

 a [href $ = ". pdf"]: före background: url ('... /images/document-pdf-text.png') no-repeat;  

Biten ovan kommer att välja varje länk som attributvärdet slutar med .pdf och sätt i en word-document-ikon i :innan pseudo-elementet.

PDF-ikonkälla: Fugue Ikoner

Även om detta är ett gemensamt utnyttjande av denna väljare, kan vi säkert gå bortom det.

När det gäller webbläsarkompatibilitet Även om denna syntax officiellt införs som CSS3-specifikationen, har den faktiskt stöttts sedan Internet Explorer 7, så du kan på ett säkert sätt tillämpa det genom alla dina mönster.

Exemplet

Du kommer aldrig veta om du inte testar. Vi behöver bara prova något nytt för att få en bättre förståelse för något vi inte förstår än. Så här ska vi visa hur denna syntax kan vara till stor hjälp och praktiskt att rikta in ett element i en viss HTML-struktur som brukade vara lite svår att applicera med bara vanlig CSS.

Nedan har vi en HTML5 struktur att lista tre bilder med dess bildtext. Det är bara för demonstrationsändamål, din uppställning behöver inte vara precis som följande kod (t.ex. du kan bara ha en bild eller till och med tre bilder), men poängen är att du får veta hur denna syntax kan tillämpas i en viss HTML-struktur.

Var och en av de bilder som anges ovan har följande format eller tillägg, jpg, png, och gif. De har också en bildtext som representerar dess bildförlängning. den här bildtexten kommer då att fungera som bildetiketten.

Så här är planen, vi kommer att ge olika bakgrundsfärger för bildtexten för varje annorlunda bildförlängning. JPG-bilden kommer att få en grön bildtext, kommer PNG att få blå, och slutligen kommer gifen att få lila.

Först, låt oss sätta figellaggens position relativt, för att vi ska tillämpa absolut position för bildtexten.

 figur position: relativ;  

Lägg till en liten dekoration för bilderna med gränser och skuggor.

 img border: 5px solid #ccc; -webkit-box-skugga: 1px 1px 3px 0px rgba (0, 0, 0, .5); boxskugga: 1px 1px 3px 0px rgba (0, 0, 0, .5);  

Och då ställer vi in ​​standardstil och positionering för bildtexten. Bildtexten eller etiketten har 50px kvadrat.

 img + figcaption färg: #fff; position: absolut; topp: 0; höger: 0; bredd: 50px; höjd: 50px; linjehöjd: 50px; text-align: center;  

Nu är det dags att lägga till bakgrundsfärgen. För att göra det kan vi kombinera attributväljaren med närliggande syskonväljaren, +.

 img [src $ = ". jpg"] + figcaption bakgrundsfärg: # a8b700;  

Biten ovan kommer att rikta in varje bild med källattributet som slutar med .jpg, då kommer den intilliggande väljaren att hitta elementet bredvid det. I detta fall figcaption kommer att läggas till med # a8b700 bakgrundsfärg.

Och här är alla koder för resten av bildformat, .png och .gif.

 img [src $ = ". png"] + figcaption bakgrundsfärg: # 389abe;  img [src $ = ".gif"] + figcaption bakgrundsfärg: # 8960a7;  

Nu kan vi se hur det visar sig att det är live från demolänken nedan, annars kan du ladda ner källan för att undersöka den offline.

• demo
• Hämta källa

Bildkällor är enligt följande: MacPro 1, MacPro 2 och MacPro 3

Slutsats

Vi hoppas att du kan se den eleganta sidan av styling med hjälp av en specialväljare, som det vi försökt att demonstrera ovan med attributväljaren. Så nästa gång du stylar din HTML, rekommenderar vi starkt att du gör lite undersökning om huruvida din styling kan appliceras med hjälp av någon speciell väljare snarare än att förstöra din ordentligt strukturerad markering med extra klasser eller id.

Det finns faktiskt två nya valörer av den här typen som vi kommer att täcka i nästa inlägg, så håll dig stillad.