Change the CSS of a class with same name

Question

I need to change the color of several names with the same class name.

How can I change the name "George" to aqua without changing the name "Aaron" from its color green?

I'm not allowed to add any IDs, !important, or add any additional new HTML to it.

<div class="grandchild">
      <!-- green -->
      <p>Aaron</p>

 <div class="grandchild">
      <!-- aqua -->
      <p>George</p>

Please note that your question reads as if you're assigning us a coding exercise as opposed to a request for help. Consider including your attempts, pointing out specifically which portion you're having trouble with, and we can do your best to help you out. — Tyler Roper, Oct 01 '19 at 19:36
Hi @aharris. It would helpful for others, and you, if you could create a quick code snippet on here to show what you are trying to do. — justDan, Oct 01 '19 at 19:36
Possible duplicate of [CSS selector for first element with class](https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class) — Andre Figueiredo, Oct 01 '19 at 19:43

score 0 · Answer 1 · answered Oct 01 '19 at 19:53

You could data labels to the <div> elements like this

<div data-name="Aaron" class="grandchild">
<p>Aaron</p>
</div>

<div data-name="George" class="grandchild">
<p>George</p>
</div>

and then write some CSS like this

.grandchild[data-name="George"] {
color: green;
}

.grandchild[data-name="Aaron"] {
color: aqua;
}

Or if you don't want to add extra HTML to the data, you would have to target the names according to their position like this:

:nth-child(1) {
color: green;
}

:nth-child(2) {
color: aqua;
}

If you do it like this, you will need to target the parent element

.parent-element:nth-child(2) {
color: aqua;
}

1 Answers1