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

Challenges with navbar and CSS alignment in Internet Explorer

Is there a way to deactivate a div in Blazor when clicking outside of the div?

Bootstrap does not control the text family, weight, and line height

The implementation of jQuery within an included HTML file may not function properly

how to use beautifulsoup to insert a new tag within a text block

Merge adjacent CSS blocks seamlessly without the need for JavaScript

Can Angular components be used to replace a segment of a string?

The CSS3 rotation transform will rotate by an angle of n degrees

Angular input range slider that automatically rounds decimal values from the data bindings

Utilizing Pagination in Python Django to Handle URL Identifiers

Enhancing user interfaces with jQuery by updating DOM elements

The footer navigation in CSS shifts position when it is hovered over

Tips for preventing menu flickering caused by overflow during CSS animations

Struggling with Angular 8: Attempting to utilize form data for string formatting in a service, but encountering persistent page reloading and failure to reassign variables from form values

Issue in Chrome when using CSS clip property on nested div elements

Discover the content of meta tags using Python and Beautiful Soup

Display a table image in a new location on the HTML page through dynamic rendering

What is the best way to showcase my divs in a masonry layout using flexbox?

Are there any jQuery Context Menu plugins clever enough to handle window borders seamlessly?

Is there a way to refresh only a specific div when clicked?