CSS egenskabs vælger detaljeret

CSS 2 introducerede egenskabsvælgere.

Egenskabsvælgere kan vælge elementer baseret på deres egenskaber og egenskabsværdier.

Simpel egenskabsvælger

Hvis man ønsker at vælge elementer med en bestemt egenskab, uanset værdien af egenskaben, kan man bruge en simpel egenskabsvælger.

Eksempel 1

Hvis man ønsker at gøre alle elementer, der indeholder en titel (title), røde, kan man skrive:

*[title] {color:red;}

Prøv det selv

Eksempel 2

Ligeså som ovenfor, kan man kun anvende stilen på anker (a-elementer) med href-egenskaben:

a[href] {color:red;}

Prøv det selv

Eksempel 3

Man kan vælge baseret på flere egenskaber, ved blot at kæde egenskabsvælgere sammen.

For eksempel, for at sætte teksten for HTML-hyperlinks med både href- og title-egenskaber til rød, kan du skrive det sådan:

a[href][title] {color:red;}

Prøv det selv

Eksempel 4

Man kan bruge nogle kreative metoder til at udnytte denne egenskab.

For eksempel kan du anvende stil til alle billeder med en alt-egenskab for at fremhæve disse gyldige billeder:

img[alt] {border: 5px solid red;}

Prøv det selv

Tip:Denne specifikke eksempel er bedre egnet til diagnose end design, dvs. til at bestemme, om et billede faktisk er gyldigt.

Eksempel 5: Brug af egenskabsvælgere i XML-dokumenter

Egenskabsvælgere er meget nyttige i XML-dokumenter, fordi XML-sproget anbefaler at specificere element- og egenskabsnavne baseret på brugen af elementerne og egenskaberne.

Antag, at vi har designet en XML-dokument til at beskrive solsystemets planeter. Hvis vi vil vælge alle planet-elementer med en moons-egenskab og gøre dem røde for at fokusere på planeter med moons, kan vi skrive det sådan:

planet[moons] {color:red;}

Dette vil gøre teksten for den anden og tredje element i følgende mærkefragment til at blive rød, men teksten for det første element er ikke rød:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Se effekten

Vælg baseret på specifikke egenskabsværdier

Besides at vælge elementer med visse egenskaber, kan du også yderligere indsnævre valgspektrumet til kun at vælge elementer med specifikke egenskabsværdier.

Eksempel 1

For eksempel, antag at du vil gøre en hyperlink, der peger på en bestemt dokument på en webserver, rød, så kan du skrive det sådan:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

Prøv det selv

Eksempel 2

Ligesom med en simpel egenskabsvælger kan flere egenskabs-værdivælgere kombineres for at vælge et dokument.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

Dette vil gøre den første hyperlink i følgende mærke til at blive rød, men den anden eller tredje link bliver ikke påvirket:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

Prøv det selv

Eksempel 3

På samme måde kan XML-sprog også bruge denne metode til at sætte stil.

Lad os nu gå tilbage til planeteksemplet. Antag, at man kun vil vælge planet-elementer, hvor moons-attributten har værdien 1:

planet[moons="1"] {color: red;}

Koden vil gøre det andet element i følgende mærke rødt, men det første og tredje element påvirkes ikke:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Se effekten

Egenskab og egenskabsværdi skal matche fuldt ud

Bemærk, at denne formatkrav kræver en fuld match med egenskabsværdien.

Hvis egenskabsværdien indeholder en liste af værdier adskilt af mellemrum, kan der opstå problemer med matchning.

Overvej følgende mærkefragment:

<p class="important warning">Denne afsnit er en meget vigtig advarsel.</p>

Hvis det skrives som p[class="important"], kan denne regel ikke matche eksempelmærket.

For at vælge et element baseret på en specifik egenskabsværdi, skal man skrive det sådan:

p[class="important warning"] {color: red;}

Prøv det selv

Vælg baseret på delværdiegenskabsvælger

Hvis man skal vælge baseret på en ordliste i egenskabsværdien, skal man bruge vuggesymbolet (~).

Antag, at du vil vælge elementer, hvor class-attributten indeholder "important", kan du gøre dette med følgende vælger:

p[class~="important"] {color: red;}

Prøv det selv

Hvis man ignorerer vuggesymbolet, betyder det, at der skal udføres en fuld værdimatch.

Forskellen mellem delværdiegenskabsvælger og punktumklassenotation

Denne vælger er lig med den punktumklassenotation, vi har diskuteret i klasseselektoren.

Det vil sige, at p.important og p[class="important"] er ekvivalente, når de anvendes på et HTML-dokument.

Så hvorfor har vi brug for en "~=" egenskabsvælger? Fordi den kan bruges til enhver egenskab, og ikke kun class.

For eksempel, kan der være et dokument med mange billeder, hvor kun nogle af dem er billeder. For dette kan man bruge en delvist baseret på title-dokumentets egenskabsvælger, kun til disse billeder:

img[title~="Figure"] {border: 1px solid gray;}

Denne regel vil vælge alle billeder, hvor titelteksten indeholder "Figure". Billeder uden title-attribut eller hvor title-attribut ikke indeholder "Figure" vil ikke matche.

Prøv det selv

Understrengmatchningsegenskabsselektor

Lad os nu præsentere en mere avanceret selektormodul, der blev udgivet efter CSS2, og som indeholder flere dele af værdyselektorer. Ifølge standarden bør det kaldes "understrengmatchningsegenskabsselektor".

Mange moderne browsere understøtter disse selektorer, herunder IE7.

Følgende tabel giver en enkel opsummering af disse selektorer:

Type Beskrivelse
[abc^="def"] Vælg alle elementer, hvor abc-attributværdien starter med "def".
[abc$="def"] Vælg alle elementer, hvor abc-attributværdien slutter med "def".
[abc*="def"] Vælg alle elementer, hvor abc-attributværdien indeholder understreng "def".

Man kan tænke sig, at disse selektorer har mange anvendelser.

For eksempel, hvis du vil anvende stil til alle links, der peger på CodeW3C.com, behøver du ikke at specificere class for alle disse links og derefter skrive stil baseret på denne klasse. Du skal kun skrive følgende regel:

a[href*="codew3c.com"] {color: red;}

Prøv det selv

Tip:Enhver egenskab kan bruges med disse selektorer.

Specifik egenskabsselektor type

Lad os sidst præsentere den specifikke egenskabsselektor. Se nedenstående eksempel:

*[lang|="en"] {color: red;}

Denne regel vil vælge alle elementer med en lang-attribut, der er lig med en eller begynder med en-.

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

Prøv det selv

Generelt kan [att|="val"] bruges til enhver egenskab og dens værdi.

Antag, at en HTML-dokument har en række billeder, hvor hver billedfilnavn har formen figure-1.jpg og figure-2.jpgMan kan bruge følgende selektor til at matche alle disse billeder:

img[src|="figure"] {border: 1px solid gray;}

Prøv det selv

Selvfølgelig er den mest almindelige anvendelse af denne egenskabsselektor at matche sprogværdier.

CSS vælger referencehåndbog

Vælger Beskrivelse
[attribute] Bruges til at vælge elementer med den specificerede egenskab.
[attribute=value] Bruges til at vælge elementer med den specificerede egenskab og værdi.
[attribute~=value] Bruges til at vælge elementer, hvor egenskabsværdien indeholder den specificerede værdi.
[attribute|=value] Bruges til at vælge elementer med egenskabsværdier, der starter med den specificerede værdi, og som er hele ordet.
[attribute^=value] Match alle elementer, hvor egenskabsværdien starter med den specificerede værdi.
[attribute$=value] Match alle elementer, hvor egenskabsværdien afslutter med den specificerede værdi.
[attribute*=value] Match alle elementer, der indeholder den specificerede værdi i egenskabsværdien.