CODEWITHSUNDEEP
csscss-selectors
iltdev
iltdev

Reputation: 1835

CSS3 - target elements with more than one data attribute

I have the following HTML

<ul>
   <li data-facet="categories" data-value="full-time">1</li>
   <li data-facet="attendance" data-value="full-time">2</li>
</ul>

I need to target the list item with data-facet="categories" and data-value="full-time"

I've tried the following:

li[data-facet="categories"]+[data-value="full-time"]{
   background-color: #ee2d24;
}

But this didn't work. For some reason it changed the background colour of the attendance list item :/

Upvotes: 0

Views: 233

Answers (2)

BoltClock
BoltClock

Reputation: 723448

As mentioned, simply chain both attribute selectors together without anything separating them, much like how you would chain attributes, classes or IDs to a type selector:

li[data-facet="categories"][data-value="full-time"]

For some reason it changed the background colour of the attendance list item :/

That's because the + actually selects the next sibling element, which is also represented by the [data-value="full-time"], separately from the li[data-facet="categories"]. Spacing them out and adding the otherwise-implied universal selector makes this a little bit clearer:

li[data-facet="categories"] + *[data-value="full-time"]

The selectors that correspond to each element are as follows:

<li data-facet="categories" data-value="full-time">1</li> <!-- li[data-facet="categories"] -->
<li data-facet="attendance" data-value="full-time">2</li> <!-- [data-value="full-time"] -->

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

Just chain the attributes, without spaces or other symbols in between

li[data-facet="categories"][data-value="full-time"]{
   background-color: #ee2d24;
}

Example: http://codepen.io/anon/pen/GJRWvW

Upvotes: 2

Related Questions