Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by João Arruda
João Arruda
5,992 Points

Ignore the style of a paragraph inside a list

Hello world!

I have created a list of items and styled it with a bold font-weight. After doing this I noticed the paragraphs I created between the list items are now also bold. Is there a way to make the paragraphs ignore the list style?

Thanks in advance.

5 Answers

João Arruda
João Arruda
5,992 Points

I've used

. rules li { font-weight: bold; }

And it worked perfectly :) Thanks!!

Alex Heil
Alex Heil
53,547 Points

you're welcome ;) great to hear that everything's working now and greets to Portugal ;)

Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

João Arruda,

I'm glad you got it working, but <ul> elements should only contain <li>'s as direct child content. Nesting paragraphs in a list is neither semantically correct nor good practice.

However, you can include paragraphs and other lists inside the <li>'s. What exactly are you trying to accomplish with the .rules list?

João Arruda
João Arruda
5,992 Points

Thanks Alex,

It is one thing to write the code while following the Deep Dive's instructions and another to do everything by yourself! Ah! ;-)

João Arruda
João Arruda
5,992 Points

To create a list with a small line of text between the list items. I have tried using a variation of the following code and it worked perfectly (and it's semantically correct, I think):

<ul>
  <li><p>A list item.</p>
  <p>With multiple paragraphs.</p></li>
  <li><p>Another item in the list.</p></li>
</ul>
Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi João Arruda,

Can you please post an example of your HTML / CSS code? Thanks!

Alex Heil
Alex Heil
53,547 Points
Alex Heil
Alex Heil
53,547 Points

hey joao, can you share your html and css code with us? I'm pretty sure we'll find a solution for you then easily ;)

João Arruda
João Arruda
5,992 Points
João Arruda
João Arruda
5,992 Points

Hey Guil Hernandez !

Here's an example of the HTML:

<ul class="rules">
   <li>A list item.</li>
   <p>A paragraph.</p> 
   <li>Another list item.</li>
   <p>Another paragraph.</p> 
< /ul>

And the CSS:

.rules {
    font-weight: bold;
 }

Thanks in advance!

Alex Heil
Alex Heil
53,547 Points
Alex Heil
Alex Heil
53,547 Points

hey João Arruda , depending on the css (.rules) I guess you wrapped a class "rules" around your lists and pagraphs, correct? that's then also the reason why everything in that area is showing bold.

what you could do would be to only select the list items in the css instead of the whole rules class - doing so the paragraphs wouldn't be effected - the other way (but that's not the clean way I'd say) would be to select the paragraphs in the css and give them a font-weight: normal; - this would reset the bold they inherit from the rules class.

hope that helps ;)