Apply different css on different elements with same attribute

Question

Let's say that I have two HTML elements: element1 and element2. They are created dynamically, so I can't use IDs:

<element1 class='class1' selected="true" ...[other_attributes]...>
<element1 class='class1' selected="true" ...[other_attributes]...>
<element1 class='class1' selected="false"...[other_attributes]...>
.................................................................
{other <element1> elements}
.................................................................
<element2 class='class2' selected="true" ...[other_attributes]...>
<element2 class='class2' selected="false"...[other_attributes]...>
.................................................................
{other <element2> elements}

Now, what I want to do, is to use the same attribute (selected) for element1 and element2, and when selected="true" on element1 to have one css, and when selected="true" on element2 to have different css. Maybe something like:

[selected=true]
{
  color.red
}

[selected = true]
{
    color.green
}

Except, I want to make it in a way that the HTML will recognize what css to assign on the different element.

I hope I was clear enough.

How do I do this?

James Donnelly · Accepted Answer · 2013-03-08 16:04:08Z

2

If it's the same element you're using, this is what classes and IDs are for:

<element id="ID1" class="red" selected="true">
<element id="ID2" class="green" selected="true">

Using IDs:

element#ID1[selected=true]
{
    color:red;
}

element#ID2[selected=true]
{
    color:green;
}

Using classes:

element.red[selected=true]
{
    color:red;
}

element.green[selected=true]
{
    color:green;
}

Note that IDs must be unique, whereas classes can be used on as many elements as you like.

Edit: Based on your modified question:

element.class1[selected=true]
{
    color:red;
}

element.class2[selected=true]
{
    color:green;
}

Alternatively you could base it on their parents (if they're different):

parent#ID1 element[selected=true] { ... }
parent#ID2 element[selected=true] { ... }

edited Mar 8, 2013 at 16:04

answered Mar 8, 2013 at 15:51

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Belphegor Over a year ago

I can't use IDs since the elements are created dynamically (I edited my post). Tnx for the help anyway!

James Donnelly Over a year ago

In your edited question your element1 and element2 have different classes. Simply use element.class1[selected=true] and element.class2[selected=true].

ScottS Over a year ago

Based on the update by the OP, your answer is definitely the way to go since the classes are already in place.

blue ghhgdtt · Accepted Answer · 2013-03-08 16:09:24Z

0

use this:

element1[selected="true"]
              {
  color:red
}

element2[selected="true"]
             {
color:green
}

answered Mar 8, 2013 at 16:09

blue ghhgdtt

9314 gold badges11 silver badges16 bronze badges

Comments

Adam Westbrook · Accepted Answer · 2013-03-08 16:11:51Z

Edited since you updated your example code, I've kept my original answer below for reference

Mix the class and attribute selectors like so:

HTML

<input class="class1" name="input" />
<input class="class1" />
<input class="class1" name="input" />

<input class="class2" name="input" />
<input class="class2" />

CSS

.class1[name=input]
{
    border: 1px solid red;
}

.class2[name=input]
{
    border: 1px solid green;
}

Original Answer

In CSS3 you have the :nth-of-type(n) selector, used like so:

HTML

<input name="test" value="First element">

<input name="test" value="Second element">

(Note that the example markup above is horrible and should never be done in real life!)

CSS

<style>

    [name=test]:nth-of-type(1)
    {
        color: red;
    }

    [name=test]:nth-of-type(2)
    {
        color: green;
    }

</style>

More info at http://www.w3schools.com/cssref/sel_nth-of-type.asp

This won't work for me, because this is for same element types but different values. I edited my post. Tnx for the help anyway!
No worries, updated my answer but its pretty much the same as one already posted it seems :-)

Collectives™ on Stack Overflow

Apply different css on different elements with same attribute

3 Answers 3

3 Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Related