CODEWITHSUNDEEP
csscss-selectors
a coder
a coder

Reputation: 7639

Why is this selector not being applied to the given tag?

This selector isn't working like I might expect: 

<style type="text/css">
    .someClass p, b {
        color:red;
        cursor : pointer;
    } 
</style>
<p>This is a test</p>
<p>This is another <b>test</b></p>
<p class="someClass">This is a test with someClass</p>
<p>This is another <b class="someClass">test</b></p>

Results and jsFiddle: Text for the non-styled paragraphs and styles appear black. Text for the p with class "someClass" is not appearing with red text, however the b with class "someClass" does appear red.

Problem: Why does the p class="someClass" (third paragraph) not appear in red, while the b class="someClass" (fourth paragraph) appears in red?

Both tags are included in the someClass selector. I've not had much luck in finding an answer with searching, and the documentation doesn't appear to address this exact scenario

Upvotes: 1

Views: 56

Answers (1)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382092

If you want your style to apply to paragraphs and b elements with class someClass, use

p.someClass, b.someClass {
    color: red;
    cursor: pointer;
}

Your existing selector targets

  • any b element
  • paragraphs that are inside an element having the class someClass.

This code :

.someClass p, b { something }

is the same as

.someClass p { something }
b { something }

Upvotes: 5

Related Questions