Only referring to a CSS class within a particular element

Question

Only referring to a CSS class within a particular element

I have defined the following CSS:

.grade a{
    color: white;
}

It is working, but maybe too well...

Now, I have an HTML structure like this:

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

The Bootstrap icon inside the list item is also colored white due to the .grade class, which I don't want.

How can I target only specific elements with the class .grade?

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

and not affect other elements with that class?

html css

Answer 1

Answer №1

Currently, your code is targeting all a elements that are descendants of an element with the class grade.

If you want to specifically select a elements that themselves have the grade class, adjust 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>

Answer 2

Currently, your code is targeting all a elements that are descendants of an element with the class grade.

If you want to specifically select a elements that themselves have the grade class, adjust 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>

Answer 3

Answer №2

Utilize typeTag.className to target the a element:

li.grade {
    color: red;
}

li.grade a i {
    color: green;
}

a.grade {
    color: blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<li class="grade">
   <a><i class="fa fa-star fa-fw"></i></a>
    My Text 
</li>
<a class="grade"> Text here should be white </a>

Answer 4

Utilize typeTag.className to target the a element:

li.grade {
    color: red;
}

li.grade a i {
    color: green;
}

a.grade {
    color: blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<li class="grade">
   <a><i class="fa fa-star fa-fw"></i></a>
    My Text 
</li>
<a class="grade"> Text here should be white </a>

Answer 5

Answer №3

Here is an example of how to use the style:

.highlight {
  background-color: yellow;
}

Check out this demo: https://jsfiddle.net/e73t9mtk/

Answer 6

Here is an example of how to use the style:

.highlight {
  background-color: yellow;
}

Check out this demo: https://jsfiddle.net/e73t9mtk/

Answer 7

Answer №4

To start off, it was not specified which color you wanted the i element to be, except that it should not be white. Therefore, I will assume it should match the body color. Here is the code for that:

body, .grade i {
  color:#777;
}

Additionally, if you intend for only the a elements within a .grade class to be white, and specifically those a elements with the class

grade</code themselves, you must include <code>a.grade

as a selector. The updated CSS would look like this:

.grade a, a.grade {
  color: white;
}

To achieve the desired outcome, you should use the following complete code snippet:

html {
  background:#ddd;
}

body, .grade i {
  color:#777;
}

.grade a, a.grade{
    color: white;
}

<ul>
  <li class="grade">
     <a><i class="fa fa-star fa-fw">(icon goes here)</i></a>
       My Text 
  </li>
</ul>
<a class="grade"> Text here should be white </a>

(I have included some additional text in the icon for visibility purposes without FontAwesome.)

Answer 8

To start off, it was not specified which color you wanted the i element to be, except that it should not be white. Therefore, I will assume it should match the body color. Here is the code for that:

body, .grade i {
  color:#777;
}

Additionally, if you intend for only the a elements within a .grade class to be white, and specifically those a elements with the class

grade</code themselves, you must include <code>a.grade

as a selector. The updated CSS would look like this:

.grade a, a.grade {
  color: white;
}

To achieve the desired outcome, you should use the following complete code snippet:

html {
  background:#ddd;
}

body, .grade i {
  color:#777;
}

.grade a, a.grade{
    color: white;
}

<ul>
  <li class="grade">
     <a><i class="fa fa-star fa-fw">(icon goes here)</i></a>
       My Text 
  </li>
</ul>
<a class="grade"> Text here should be white </a>

(I have included some additional text in the icon for visibility purposes without FontAwesome.)

Only referring to a CSS class within a particular element

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Increasing space at the top with heading

Make sure to load the <img> html tag before implementing js masonry for optimal

Combining text and images in XSLT using CSS: A comprehensive guide

Adding a class to an element can be easily achieved when both input fields have values

Determine the TR id when a button within a TD element is clicked using JavaScript/jQuery

The background color of the CSS div tag does not cover the entire axis

Experiencing problems with malfunctioning javascript tabs

Animating ng-switch transitions within a div element

Gather updated information from a hover popup using Selenium and Python for a fresh data table integration

Scrollable container with jQuery draggable functionality

Using @media queries for mobile and desktop: preventing desktop from displaying mobile styles

Extract HTML href links that correspond to a specific string from a given list of strings using Beautiful Soup

Tips on saving this information in a MySQL database

Display the concealed mat-option once all other options have been filtered out

Collapse dropdown menus upon clicking outside of them

What is the best way to position the top line next to the border?

React JS - Large image failing to display entirely

What is the best way to use CSS to hyphenate a capitalized word?

Using regex for 'OR' conditions in regular expressions

Press the smiley icon and drag it into the designated input box