Use various CSS styles for distinct elements that share a common attribute

Question

Use various CSS styles for distinct elements that share a common attribute

Imagine we have two HTML elements, element1 and element2, both created dynamically without 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}

The task at hand is to apply different CSS styles based on the 'selected' attribute of each element. For instance, one style for when selected="true" on element1, and another style when selected="true" on element2. This can be achieved using something like:

[selected=true]
{
  color:red;
}

[selected = true]
{
    color:green;
}

The challenge here is to ensure that the correct CSS styling is associated with the respective HTML element.

How can this be accomplished efficiently?

html css

Answer 1

Answer №1

When working with the same element, classes and IDs have specific purposes:

<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;
}

Utilizing classes:

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

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

Remember that IDs must be unique, while classes can be assigned to multiple elements.

Edit: Considering your updated inquiry:

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

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

Alternatively, you could differentiate based on their parent elements (if applicable):

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

Answer 2

When working with the same element, classes and IDs have specific purposes:

<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;
}

Utilizing classes:

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

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

Remember that IDs must be unique, while classes can be assigned to multiple elements.

Edit: Considering your updated inquiry:

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

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

Alternatively, you could differentiate based on their parent elements (if applicable):

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

Answer 3

Answer №2

Try the following:

element1[active="yes"]
              {
  text-decoration: underline;
}

element2[chosen="true"]
             {
color:blue
}

Answer 4

Try the following:

element1[active="yes"]
              {
  text-decoration: underline;
}

element2[chosen="true"]
             {
color:blue
}

Answer 5

Answer №3

Updated based on your example code changes, I have included my initial response below for comparison

Combine class and attribute selectors in the following way:

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;
}

Initial Response

In CSS3, utilize the :nth-of-type(n) selector as shown below:

HTML

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

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

(Please note that the provided markup above is not recommended for real-life usage!)

CSS

<style>

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

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

</style>

For further information, visit http://www.w3schools.com/cssref/sel_nth-of-type.asp

Answer 6

Updated based on your example code changes, I have included my initial response below for comparison

Combine class and attribute selectors in the following way:

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;
}

Initial Response

In CSS3, utilize the :nth-of-type(n) selector as shown below:

HTML

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

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

(Please note that the provided markup above is not recommended for real-life usage!)

CSS

<style>

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

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

</style>

For further information, visit http://www.w3schools.com/cssref/sel_nth-of-type.asp

Use various CSS styles for distinct elements that share a common attribute

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to expand this embedded video so that it spans the entire width of the screen

Having trouble fitting oversized images into Bootstrap columns, attempting to resize them to stay within the column boundaries

Banner with video background (not taking up the entire page)

Which is more effective: coding with just plain JavaScript and CSS, or utilizing frameworks?

Django: Hosting CSS on S3 with accurate URL, yet failing to load

How can you use JavaScript to retrieve the position of an element on a webpage?

Angular functions are executed twice upon being invoked within the html file

I am having trouble adjusting my web page to fit the screen fluidly as it appears too large and requires horizontal scrolling

Adjust the width of the TinyMCE Editor to automatically resize based on the content being

What is the best way to position a form element, such as a search bar, in the center of a navigation

Styling with Radial Gradients in CSS

What could be causing a hydration error when utilizing a table in Next.js?

The elegant-admin template's mobile navigation toggle is missing

When I click the button, I would like the value of the button to be displayed in a textbox

Troubleshooting PHP code: resolving issues with images not appearing in forwarded emails

Adding data into a JSON Array

Easily manipulate textboxes by dynamically adding or deleting them and then sending the data to a

The scrollbar remains visible on mobile devices

Ensure that the child iframe is referencing its own content, and not that of the parent iframe

Is CSS Transition smoothly easing in, but not out?