The unexpected behavior of nesting in CSS class selectors

Question

Here is a paragraph element I'm working with:

<p class='big bold'>Some random text</p>

I attempted to style it using the following code:

p .big{
    font-size:60px;
}
p .bold{
    font-weight:bold;
}

Unfortunately, the styling did not work as expected. Oddly enough, removing the p selector made it work.

I had assumed that it would work because in Sass nesting behaves differently. If not, there may be limited benefits to utilizing nesting in Sass.

Answer 1

Answer №1

p .bold

In CSS, spaces in selectors indicate descendant relationships, so the selector above is targeting a descendant element of p with the class .bold

To correct it, you should use

p.bold

Answer 2

p .bold

In CSS, spaces in selectors indicate descendant relationships, so the selector above is targeting a descendant element of p with the class .bold

To correct it, you should use

p.bold

Answer 3

eliminate any extra spaces because they are reserved for descendants, make sure to target <p> with the class bold instead of

class bold within a paragraph tag

p.bold{
     font-weight:bold;
 }

the same rule applies to p.big

Answer 4

eliminate any extra spaces because they are reserved for descendants, make sure to target <p> with the class bold instead of

class bold within a paragraph tag

p.bold{
     font-weight:bold;
 }

the same rule applies to p.big

Answer 5

To function properly, the element must have the classes p.big and p.bold or p.big.bold. Hopefully this information is useful to you 🙂

Answer 6

To function properly, the element must have the classes p.big and p.bold or p.big.bold. Hopefully this information is useful to you 🙂