CSS: Ciljanje določenih nizov v HTML-ju

CSS v svoji specifikaciji trem atributom omogoča ciljanje določenih nizov v HTML-ju. Te atribute imenujemo »substring matching attribute selectors«, omogočajo pa nam ciljanje določenih nizov na začetku, na koncu ali na vsebovanost v imenu.

Takšno ciljanje pa nam ponuja veliko možnosti, saj nam med drugim omogoča tudi ciljanje generičnih class-ov, ki se generirajo npr. strojno. Primere takšnih class-ov srečamo tudi v WordPressu, kot je npr.: »post-3263«. Poleg široke uporabe pa imajo CSS atributi tudi zelo dobro podporo, saj jih lahko uporabljamo tudi v Internet Explorer-ju 7.

Ciljanje niza na začetku

Prvi primer nam omogoča ciljanje HTML elementov na podlagi niza na začetku imena. Za primer bomo ciljali vse povezave, ki se začnejo z »http://«.

a[href^="http://"] {
  color: #cc0000;
}

Ciljanje niza na koncu

Naslednji atribut pa nam ponuja ravno obratno možnost, in sicer cilja niz na koncu imena. Spodnji primer nam omogoča dodajanje ikone za PDF na vse povezave, ki vodijo do PDF dokumentov.

a[href$=".pdf"] {
  background: url(pdf.png) no-repeat center right;
  padding-right: 15px;
}

Ciljanje vsebovanosti niza v imenih

Tretji atribut pa omogoča ciljanje na ponovitev niza, kjer koli v imenu, se pravi ne samo na začetku in na koncu. Niz se lahko tako pojavi, kjer koli v imenu. Spodnji primer prikazuje ciljanje class-ov, ki jih generira WordPress.

div[class*="post-"] {
  color: #cc0000;
}

Oznake: attribute selectorsCSSsubstring matching

Komentiraj


*