How can I rotate different cards using CSS?

Question

What I am trying to do is have a lot of cards displayed on the screen. When you click them, they should rotate and change their color. The problem I have is that no matter which card I click, only the first one changes, instead of the one being clicked.

Here is a fiddle:

http://jsfiddle.net/GZ8zr/2/

html:

<body>

    <div class="pane">
    <input type="checkbox" id="button">
    <label class="card" for="button"></label>

    <input type="checkbox" id="button">
    <label class="card" for="button"></label>

    <input type="checkbox" id="button">
    <label class="card" for="button"></label>

    <input type="checkbox" id="button">
    <label class="card" for="button"></label>
    </div>

</body>

css:

input
    {
    width:100px;
    height:100px;
    display:none
    }
.card
    {
    width:100px;
    height:100px;
    background:red;
    display:block;
    transition: background 1s, -webkit-transform 1s;
    }
input:checked +.card
    {
    background:blue;
    -webkit-transform: rotateX(180deg);
    }

thanks

possible duplicate of [CSS: Select the first adjacent sibling](http://stackoverflow.com/questions/8828608/css-select-the-first-adjacent-sibling) — Diodeus - James MacFarlane, Aug 15 '13 at 17:44
There is no "first sibling" selector in CSS. You need to use JavaScript. — Diodeus - James MacFarlane, Aug 15 '13 at 17:44

score 3 · Accepted Answer · answered Aug 15 '13 at 17:45

3

Your problem is you're using the same ID on the three inputs and labels. As per W3C spec, IDs must be unique on a page. And that's what the for attribute is expecting. So change your code to look like this: http://jsfiddle.net/GYatesIII/GZ8zr/4/

answered Aug 15 '13 at 17:45

George Yates

1,237
9
16

lc. · Answer 2 · 2013-08-15T17:52:21.003

You have the same id "button" three times. Therefore - at least on my browser and presumably yours too - each label is for the first checkbox. AFAIK this behavior is also undefined, since the standard expects unique ids for any given page (see below).

This fork of your fiddle with the display:none removed for the checkboxes demonstrates that clicking on any of the labels causes the first checkbox to be toggled.

This fiddle, on the other hand, demonstrates your code working properly when the ids are unique.

Also note that the HTML standard specifies that ids must be unique:

id = name [CS] : This attribute assigns a name to an element. This name must be unique in a document.

score 0 · Answer 3 · answered Aug 15 '13 at 17:48

The problem is that your inputs and labels are all targeting just the first input tag - which is incorrect. Here is a working demo: http://jsfiddle.net/GZ8zr/6/

If your input has id "button", then no other inputs can have that id. Even if you do that, the first input checkbox will be checked - html itself enforcing that there is just one unique ID every html page.

HTML:

<div class="pane">
<input type="checkbox" id="button1">
<label class="card" for="button1"></label>

<input type="checkbox" id="button2">
<label class="card" for="button2"></label>

<input type="checkbox" id="button3">
<label class="card" for="button3"></label>

<input type="checkbox" id="button4">
<label class="card" for="button4"></label>
</div>
    </body>

You need to change the ID on your first checkbox to `button1` — George Yates, Aug 15 '13 at 17:50
thanks for the tip..must have missed that. quickly changed. thnx again! — AdityaSaxena, Aug 15 '13 at 17:51

score -2 · Answer 4 · answered Aug 15 '13 at 17:47

-2

All cards must have a unique identifier. You are clicking on a card and CSS is running on the first thing that the class is applied to (in this case the first card). I would use jquery to select the specific card you want the class applied to -> $(this). Hope that helps.

answered Aug 15 '13 at 17:47

JT Nolan

1,200
1
9
17

2

Hey, I wouldn't recommend adding JavaScript or jQuery to a project that doesn't absolutely need it. – George Yates Aug 15 '13 at 17:56

How can I rotate different cards using CSS?

4 Answers4