Data attribute to have multiple sub-category tags? [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 8 years ago.

Improve this question

How can I add two data-filters to a div? And how can I select two filters at same time using data-filters?

Here is what I tried with no luck:

Multiple data-filters

<div data-filter="red blue green"></div>

Multiple tags:

 <a href="#" data-filter="blue, red" tabindex="-1">BLUE&RED</a>

Here is a example:

http://jsfiddle.net/joshvogt/UybPY/

Answer 1

HTML:

<section>
    <a href="#" data-filter="all" tabindex="-1">ALL</a>
    <a href="#" data-filter="red" tabindex="-1">RED</a>
    <a href="#" data-filter="green" tabindex="-1">GREEN</a>
    <a href="#" data-filter="blue" tabindex="-1">BLUE</a>
    <a href="#" data-filter="red,green" tabindex="-1">RED & GREEN</a>
    <a href="#" data-filter="green,blue" tabindex="-1">GREEN & BLUE</a>
    <a href="#" data-filter="blue,red" tabindex="-1">BLUE & RED</a> 
    <div data-filter="red"></div>
    <div data-filter="blue"></div>
    <div data-filter="red"></div>
    <div data-filter="blue"></div>
    <div data-filter="green"></div>
    <div data-filter="red"></div>
    <div data-filter="red"></div>
    <div data-filter="red"></div>
    <div data-filter="blue"></div>
    <div data-filter="green"></div>
    <div data-filter="blue"></div>
    <div data-filter="green"></div>
    <div data-filter="green"></div>
</section>

CSS:

section {
    display:block;
    float:left;
    border:2px solid green;
    min-height:300px;
    width:100%;
    border-radius:4px;
}
a {
    display:block;
    float:left;
    width:25%;
    text-decoration:none;
    text-align:center;
    padding:5px 0;
    color:white;
    background:#1271C7;
}
div {
    display:block;
    float:left;
    height:40px;
    width:40px;
    border:1px solid black;
    margin:10px;
    -webkit-transition:all .8s linear;
    -moz-transition:all .8s linear;
    -o-transition:all .8s linear;
    -ms-transition:all .8s linear;
    transition:all .8s linear;
    margin-top:20px;
}
div[data-filter="red"] {
    background:red;
}
div[data-filter="green"] {
    background:green;
}
div[data-filter="blue"] {
    background:blue;
}
a:focus[data-filter] {
    opacity:.8;
    outline:none;
}
/*
    I grouped selectors since rules are the same
*/
a[data-filter="blue,red"]:focus ~ div:not([data-filter="red"]):not([data-filter="blue"]),
a[data-filter="red,green"]:focus ~ div:not([data-filter="red"]):not([data-filter="green"]),
a[data-filter="green,blue"]:focus ~ div:not([data-filter="green"]):not([data-filter="blue"]),
a[data-filter="red"]:focus ~ div:not([data-filter="red"]),
a[data-filter="green"]:focus ~ div:not([data-filter="green"]), 
a[data-filter="blue"]:focus ~ div:not([data-filter="blue"]) {
    height:0px;
    width:0px;
    border:none;
    margin:0;
}

Demo here: http://jsfiddle.net/pixshatterer/ZPx7e/

There you can notice two things:

1) data-filters attribute in element doesn't have any relevance, the only important thing, is to set the right attribute into the selectors for the a:focus

2) select multiple attributes is not an option - yet - for :not pseudo selector. But you can chain them as shown above, so instead of

div:not(x,y,z)

it should be

div:not(x):not(y):not(z)

Answer 2

You can try using CSS selector "contains" *=. For example in this setup

div {
   width:100px;
   height:100px; 
   border: solid 1px black 
}

div[data-filter*="red"]:hover {
    background-color:red;
}

div[data-filter*="green"]:hover {
    border: solid 4px green
}

<div data-filter="red blue green">1</div>
<div data-filter="red blue">2</div>
<div data-filter="blue green">3</div>

Second CSS class will select both first and the second DIV, while third CSS class will select both first and the third div.

Demo: http://jsfiddle.net/7QK54/