WebQube WebQube - 1 year ago 69
CSS Question

Referencing a CSS class only within a specific element only

I have defined this:

.grade a{
color: white;
}


It works. too well..

I have an html like so

<li class="grade">
<a><i class="fa fa-star fa-fw"></i></a>
My Text
</li>


The bootsrap i star element is painted white. And I don't want it to.

How can I only specify element with a of class .grade

<a class="grade"> Text here should be white </a>


and not other elements?

Answer Source

As is, you are selecting any a element which is a descendant of an element with the class grade.

To specify an a element that has the grade class itself, change your selector to:

a.grade

a.grade {
  color: red;
}

.grade a {
  color: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<li class="grade">
   <a><i class="fa fa-star fa-fw">Text within an &lt;a&gt; descendant of .grade</i></a><br>
      Text outside of &lt;a&gt; element
</li>

<a class="grade"> Text in an &lt;a&gt; element, which has the class grade itself. </a>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download