CSS3 Odabir atributa Ciljanje vrste datoteke

Ovaj članak je dio našeg "Serija vodiča za HTML5 / CSS3" - posvećeni pomoći da postanete bolji dizajner i / ili programer. Kliknite ovdje da biste vidjeli više članaka iz iste serije.

izbornici atributa je stvarno korisna značajka za odabir elementa bez dodavanja suvišnog iskaznica ili klase. Sve dok ciljani element ima atribut sličan href, src i tip ne moramo to učiniti.

Selektori atributa su zapravo bili u blizini od CSS-a 2.1, a sada s dodavanjem nekoliko tipova selektora atributa u specifikacijama CSS3, u mogućnosti smo ciljati atribut elementa još preciznije.

I, u ovom postu, mi ćemo koristiti jednu od sintakse za odabir Vrsta datoteke koja je umetnuta kao dio vrijednosti atributa.

Sintaksa i podrška preglednika

Vrsta datoteke uvijek je na kraju naziva datoteke. Dakle, za odabir Vrsta datoteke možemo koristiti sljedeću sintaksu [Attr $ = "vrijednost"]. Ova sintaksa koristi $ = operator koji će ciljati kraj vrijednosti atributa, na primjer:

 a [href $ = ". pdf"]: prije pozadina: url ('… /images/document-pdf-text.png') nema ponavljanja;

Gornji isječak će odabrati svaku vezu s kojom vrijednost atributa završava .pdf i umetnite ikonu riječi-dokumenta u :prije pseudo elemenata.

Izvor ikona PDF-a: Ikone fuge

Iako je ovo uobičajeno korištenje ovog selektora, sigurno možemo ići dalje od toga.

Što se tiče kompatibilnosti preglednika; iako je ova sintaksa službeno uvedena kao CSS3 specifikacija, ona je zapravo podržana Internet Explorer 7, tako da ga možete sigurno primijeniti kroz sve svoje dizajne.

Primjer

Nikada nećeš znati ako ne pokušaš. Samo trebamo probati nešto novo kako bismo bolje razumjeli nešto što još ne razumijemo. Dakle, ovdje ćemo pokazati kako ova sintaksa može biti vrlo korisna i korisna za ciljanje elementa u određenoj HTML strukturi koja je nekad bila teška za primjenu koristeći samo običan CSS.

U nastavku, imamo Struktura HTML5 za popis tri slike s opisom. To je samo u svrhu demonstracije, označavanje ne mora biti točno kao sljedeći isječak (npr. Možete imati samo jednu sliku ili čak tri slike), ali poanta je da saznate kako se ova sintaksa može primijeniti u određenu HTML strukturu.

    jpg
 
 
    png
 
 
    gif

Svaka od gore navedenih slika ima sljedeće formate ili proširenja, jpg, png, i gif. Oni također imaju naslov koji predstavlja njezino proširenje slike; ovaj naslov će tada djelovati kao oznaka slike.

Dakle, ovdje je plan, mi ćemo dati različite boje pozadine za opis za svako drugo proširenje slike. JPG slika će dobiti a zelena boja naslova, PNG će dobiti plava, i na kraju GIF će dobiti purpurna boja.

Prvo, postavimo položaj oznake figure, jer idemo primjenjivati apsolutan mjesto za naslov.

 slika položaj: relativna;

Dodajte mali ukras za slike s rubovima i sjenama.

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

Zatim postavljamo zadani stil i poziciju za naslov. Naslov ili oznaka slike imat će kvadrat 50px.

 img + figcaption boja: #fff; položaj: apsolutni; na vrh: 0; desno: 0; širina: 50px; visina: 50px; visina linije: 50px; poravnavanje teksta: centar;

Sada je vrijeme za dodavanje boje pozadine. Da bismo to učinili, možemo kombinirati selektor atributa s susjednim selektorom, +.

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

Gornji isječak cilja svaku sliku s atributom izvora koji završava s .jpg, tada će susjedni birač pronaći element pored njega. U ovom slučaju figcaption će biti dodan sa # a8b700 boja pozadine.

I ovdje su svi kodovi za ostale formate slika, .png i .gif.

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

Sada ćemo vidjeti kako se ispostavlja uživo iz demo veze u nastavku, inače možete preuzeti izvor kako biste ga pregledali izvan mreže.

Demo
Preuzimanje izvora

Izvori slike su sljedeći: MacPro 1, MacPro 2 i MacPro 3

Zaključak

Nadamo se da možete vidjeti elegantnu stranu stylinga pomoću posebnog selektora, poput onoga što smo pokušali prikazati pomoću selektora atributa. Dakle, sljedeći put kad stilizirate svoj HTML, preporučujemo vam da istražite da li se vaš stil može primijeniti pomoću nekog posebnog selektora, umjesto da uništite svoj pravilno strukturirani markup s dodatnim klase ili iskaznica.

Zapravo postoje još dva nova selektora ovog tipa koji ćemo pokriti u sljedećim postovima, stoga ostanite s nama.