Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 57

Tell us what’s happening:
I am struggling to understand what’s the difference between the following selectors:

  1. tr[class~="total"]
  2. tr[class="total"]
  3. tr.total

To the best of my understanding, the first one will select all tr elements if they have total as one of the classes in their list of classes. The second is only targeting the tr elements that only have one class i.e., total. But where does the third one fit in all this and how is it different? To me, it seems similar to the 2nd one.

Your code so far

tr.total td {
  text-align: right;
  padding: 0 0.25rem
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 Edg/114.0.1823.41

Challenge: Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 57

Link to the challenge:

The key difference between tr[class=“total”] and tr. total is that the first will select tr elements where the only class is total . The second will select tr elements where the class includes total .

In this case, the following selectors will do the same:

tr[class="total"] td {
text-align: right;
padding: 0 0.25rem;
}
tr.total td {
  text-align: right;
  padding: 0 0.25rem
}

But If ‘tr’ elements have more values for the ‘class’ attribute (aka different classes), the second solution will target only those with the ‘class’ that includes “total” besides other values. In this example, the main purpose is to try different options although the ‘class’ attribute has the same values throughout the whole HTML code. Nevertheless, the second selector targets only ‘td’ elements, so it is applicable in this case.

1 Like


Did this and noted my observation as comments in the CSS code. Do I have it right?

The following code line:

<p class="one two three">text <i>Text</i> <span>Yes</span> <b>Of Course</b></p>
<p class="two three">text <i>Text</i> <span>Yes</span></p>

with this css rules:

p.one i {
  color:red;
}
p.one b {
  color:yellow;
}
p.one span {
  color: blue;
}

gives as a result this:
image

Try to find the difference in relation to other selectors you have used.
Obviously, I have targeted the particular elements within the first p element with given CSS rules, but with different styles.

Also, pay attention to the cascading principle:
" If different styles are defined on the same priority level, the last one has the highest priority."

Tried different selectors such as p i, p[class], p[class="one"], p[class~="one"] and .three. I think now I understand how these selectors work differently from each other.
And yeah, I observed that cascading principle during some of the projects. Thank you so much! :slight_smile:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.