name name name name - 5 months ago 10
HTML Question

Select all a tags that are in certain class

How do I select with css all a tags that are in a div that has

class = class1


Let's say I have this structure(just an example):

<div class="class1">
<div> <a>should be selected</a> </div>
<p><span> <a>should be selected</a> </span></p>
<a>should be selected</a>
</div>
<a>should not be selected</a>


How do I select all
a
elements that are in
div
with class1 and not somewhere else.
I tried to do
.class1 > a { }
but it doesn't select all a tags I need

Answer

Your selector

.class > a

.class1 > a {
  color:red;
  }
<div class="class1">
  <div> <a>should be selected</a> 
  </div>
  <p><span> <a>should be selected</a> </span>
  </p>
  <a>Just this will be selected</a>
</div>

Just target the direct descendents that are a tags inside .class . Just travel one level deep.

With

.class a

.class1 a {
  color: red;
}
<div class="class1">
  <div> <a>should be selected</a> 
  </div>
  <p><span> <a>should be selected</a> </span>
  </p>
  <a>should be selected</a>
</div>

You select all a tags inside .class. All levels.