Referencing a CSS class only within a specific element

Question

I am trying to find the CSS syntax for a specific problem. I really searched but couldn't find answer. Here is the problem. My HTML markup is as follow:

<div>
 <header>
  <div class="container">
   <div class="row">
   my content that I want red
   </div>
  </div>
 </header>
 <div class="container">
  <div class="row">
  my content that I want blue
  </div>
 </div>
</header>

I would like to display "my content that I want red" in red, and "my content that I want blue" in blue, and I only can use CSS for that.

Does anyone knows the trick that will make it? sub classes cant work here unfortunately.

Thanks in advance,

Answer 1

There's lots of options. It all really depends on your circumstances. Here's a couple without modifying the HTML:

Using parent element

.row { color: blue }
header .row { color: red }

Using :nth-of-type

.column:nth-of-type(1) .row { color: red }
.column:nth-of-type(2) .row { color: blue }

If you're willing to add additional markup, you could always add additional classes.