CSS3 Attributvelger Målretting av filtype

Denne artikkelen er en del av vår "HTML5 / CSS3 opplæringsserie" - dedikert til å gjøre deg til en bedre designer og / eller utvikler. Klikk her å se flere artikler fra samme serie.

De attributt selectors er en veldig nyttig funksjon for å velge et element uten å legge til overflødig id eller klasser. Så lenge det målrettede elementet har et attributt som href, src og type vi trenger ikke å gjøre det.

Attributtvelgerne har faktisk eksistert siden CSS 2.1, og nå med noen få flere typer attributtvelektorer lagt til i CSS3-spesifikasjonene, kan vi målrette elementets attributter enda mer spesifikt.

Og i dette innlegget skal vi bruke en av syntaksene til å velge filtype som er satt inn som en del av attributtets verdi.

Syntaks- og nettleserstøtten

De filtype er alltid på slutten av filnavnet. Så, for å velge det filtype vi kan bruke følgende syntaks [Attr $ = "verdi"]. Denne syntaksen bruker $ = operatør som vil målrette mot slutten av attributtverdien, for eksempel:

 a [href $ = ".pdf"]: før bakgrunn: url ('... /images/document-pdf-text.png') ikke-gjenta;  

Utsnittet ovenfor vil velge hver kobling som attributtverdien slutter med .pdf og sett inn et ord-dokument-ikon i :før pseudo-element.

PDF ikon kilde: Fugue Ikoner

Selv om dette er en felles utnyttelse av denne velgeren, kan vi sikkert gå utover det.

Når det gjelder nettleserkompatibilitet Selv om denne syntaksen er offisielt introdusert som CSS3-spesifikasjonen, har den faktisk blitt støttet siden Internet Explorer 7, slik at du trygt kan bruke den gjennom alle designene dine.

Eksempelet

Du vet aldri hvis du ikke prøver. Vi trenger bare å prøve noe nytt for å få en bedre forståelse av noe vi ikke forstår ennå. Så her skal vi demonstrere hvordan denne syntaksen kan være svært nyttig og praktisk for å målrette et element i en bestemt HTML-struktur som pleide å være litt vanskelig å bruke ved hjelp av bare vanlig CSS.

Nedenfor har vi en HTML5 struktur å liste tre bilder med bildeteksten. Det er kun for demonstrasjonsformål, men du må ikke være akkurat som følgende utdrag (f.eks. Du kan bare ha ett bilde eller enda tre bilder), men poenget er at du får vite hvordan denne syntaksen kan brukes i en bestemt HTML-struktur.

Hvert av bildene som er oppført ovenfor har følgende formater eller utvidelser, jpg, png, og gif. De har også en bildetekst som representerer dens bildeutvidelse; denne bildeteksten vil da fungere som bildeetiketten.

Så, her er planen, vi skal gi forskjellige bakgrunnsfarger for bildeteksten for hver annerledes bildeutvidelse. JPG-bildet vil få en grønn bildetekst farge, vil PNG få blå, og til slutt vil gifen få lilla.

Først, la oss stille figurtakets posisjon relativt, fordi vi skal søke absolutte posisjon for bildeteksten.

 figur stilling: relativ;  

Legg til en liten dekorasjon for bildene med grenser og skygger.

 img grense: 5px solid #ccc; -webkit-boks-skygge: 1px 1px 3px 0px rgba (0, 0, 0, .5); boksskygge: 1px 1px 3px 0px rgba (0, 0, 0, .5);  

Og så setter vi standard stil og posisjonering for bildeteksten. Bildeteksten eller etiketten har 50 px firkant.

 img + figcaption color: #fff; posisjon: absolutt; topp: 0; høyre: 0; bredde: 50px; høyde: 50px; linjehøyde: 50px; tekstjustering: center;  

Nå er det på tide å legge til bakgrunnsfargen. For å gjøre det, kan vi kombinere attributtvelgeren med tilstøtende søskenvelgeren, +.

 img [src $ = ". jpg"] + figcaption bakgrunnsfarge: # a8b700;  

Utsnittet over vil målrette mot hvert bilde med kildetributtet som slutter med .jpg, da vil den tilgrensende viften finne elementet ved siden av det. I dette tilfellet figcaption vil bli lagt til med # a8b700 bakgrunnsfarge.

Og her er alle kodene for resten av bildeformatene, .png og .gif.

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

Nå, la oss se hvordan det viser seg å være levende fra demo-lenken under, ellers kan du laste ned kilden for å undersøke den offline.

• Demo
• Last ned kilde

Bildekilder er som følger: MacPro 1, MacPro 2 og MacPro 3

Konklusjon

Vi håper at du kan se den elegante siden av styling ved hjelp av en spesiell velg, som det vi har forsøkt å demonstrere over ved hjelp av attributtvelgeren. Så neste gang du styler HTML-en din, anbefaler vi sterkt at du gjør noen undersøkelser om hvorvidt stylingen din kan brukes med noen spesiell velg, i stedet for å ødelegge riktig strukturert markering med ekstra klasser eller id.

Det er faktisk to nye nye selektorer av denne typen som vi vil dekke i de neste innleggene, så hold deg innstilt.