Element automatisch selecteren css attribute data value

Logo cursus traing wordpress

Element automatisch selecteren css attribute data value

Elementen selecteren in css met attribute data value

Er zijn veel manieren waarop je elementen kunt selecteren in CSS. De meest elementaire selectie is op tagnaam, zoals p { }. Bijna alles wat specifieker is dan een tag-selector gebruikt attributen – en ID selecteren beide op die attributen op HTML-elementen. Maar klasse en ID zijn niet de enige attributen die ontwikkelaars kunnen selecteren. We kunnen alle attributen van een element gebruiken als selector.

Attribuutselectie heeft een speciale syntaxis. Hier is een voorbeeld:

a[href=”https://cursuswp.com”] {
color: #dd0000;
}

Dat is een exact match selector die alleen links selecteert met de exacte href attribuut waarde van “https://css-tricks.com”.

7 verschillende types

Attribuut selectors zijn standaard hoofdlettergevoelig (zie hoofdletterongevoelig matchen hieronder), en worden geschreven binnen haakjes [ en ].

Er zijn zeven verschillende soorten overeenkomsten die je kunt vinden met een attribuut-selector, en de syntaxis is voor elk verschillend. Elk van de meer complexe attribuut selectors bouwt voort op de syntaxis van de exacte match selector.

Ze beginnen allemaal met de attribuutnaam en eindigen met een gelijkteken gevolgd door de attribuutwaarde(n), meestal tussen aanhalingstekens. Wat er tussen de attribuutnaam en het gelijkheidsteken staat, maakt het verschil tussen de selectors.

[data-waarde] 
{
  /* Attribuut bestaat */
}

[data-value="foo"] 
{ {
  /* Attribuut heeft deze exacte waarde */
}

[data-value*="foo"] 
{ /* Attribuut heeft deze exacte waarde */ }.
  /* Attribuut waarde bevat deze waarde ergens in */
}

[data-value~="foo"] 
{ /* Attribuutwaarde bevat deze waarde ergens in */ }.
  /* Attribuut heeft deze waarde ergens in een door spaties gescheiden lijst */
}

[data-value^="foo"] 
{ /* Attribuut heeft deze waarde ergens in een door spaties gescheiden lijst */ } }.
  /* Attribuutwaarde begint hiermee */
}

[data-value|="foo"] 
{ /* Attribuutwaarde begint hiermee */ }.
  /* Attribuutwaarde begint hiermee in een door streepjes gescheiden lijst */
}

[data-value$="foo"] 
{ /* Attribuutwaarde eindigt met dit */ }.
  /* Attribuutwaarde eindigt hiermee */
}

Waarde bevat:

kenmerk waarde bevat een term als enige waarde, een waarde in een lijst van waarden, of als deel van een andere waarde. Om deze selector te gebruiken, voegt u een sterretje () toe voor het gelijkteken. Bijvoorbeeld, img[alt=”art”] zal selecteren met de “abstracte kunst” en “atleet die een nieuwe sport begint”, omdat de waarde “kunst” in het woord “beginnen” zit.

Waarde staat in een door spaties gescheiden lijst:

waarde is ofwel de enige attribuutwaarde, ofwel een hele waarde in een door spaties gescheiden reeks waarden. In tegenstelling tot de “bevat” selector zal deze selector niet zoeken naar de waarde als een woordfragment. Om deze selector te gebruiken voegt u een tilde (~) toe voor het gelijkteken. Bijvoorbeeld, img[alt~=”art”] zal afbeeldingen selecteren met de alt-tekst “abstracte kunst” en “kunstshow”, maar niet “atleet die een nieuwe sport begint” (wat de “bevat” selector zou selecteren).

Waarde begint met:

attribuutwaarde begint met de geselecteerde term. Om deze selector te gebruiken, voeg je een caret (^) toe voor het gelijkteken. Vergeet niet dat hoofdlettergevoeligheid belangrijk is. Bijvoorbeeld, img[alt^=”art”] zal afbeeldingen selecteren met de alt-tekst “kunstvoorstelling” en “artistiek patroon”, maar niet een afbeelding met de alt-tekst “Arthur Miller” omdat “Arthur” met een hoofdletter begint.

De waarde in een door streepjes gescheiden lijst:

Deze selector lijkt sterk op de “begint met” selector. Hier komt de selector overeen met een waarde die ofwel de enige waarde is, ofwel de eerste in een door streepjes gescheiden lijst van waarden. Om deze selector te gebruiken, voegt u een pijpteken (|) toe vóór het gelijkteken. Bijvoorbeeld, li[data-years|=”1900″] zal lijstitems selecteren met een data-years waarde van “1900-2000”, maar niet het lijstitem met een data-years waarde van “1800-1900”.

Waarde eindigt met:

attribuutwaarde eindigt met de geselecteerde term. Om deze selector te gebruiken, voegt u een dollarteken ($) toe voor het gelijkteken. Bijvoorbeeld, a[href$=”pdf”] selecteert elke link die eindigt op .pdf.

Combineren van CSS waarden

U kunt een attribuutselector combineren met andere selectors, zoals tag, klasse of ID. Zie hieronder:

div[attribute="value"] {
  /* stijlregels hier */
}

.module[attribute="value"] {
  /* stijlregels hier */
}

#header[attribute="value"] {
  /* stijlregels hier */
}

Meer info over Attribute en CSS

Vragen over attribute CSS

https://stackoverflow.com/questions/65086625/hide-element-if-data-contains-specific-piece-of-text


Meer weten over Element automatisch selecteren css attribute data valueof info?

Wil je meer informatie? Veel bezoekers met interesse in Element automatisch selecteren css attribute data value bekeken ook de onderstaande handleidingen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je WordPress website of webshop beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je WordPress website sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over Element automatisch selecteren css attribute data value?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, Element automatisch selecteren css attribute data value en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven