Skip to main content
Inspiring
February 10, 2020
Answered

target list items of paragraph style only

  • February 10, 2020
  • 3 replies
  • 1335 views

Hi,

 

To make the vertical gaps between each bulleted line greater than the auto-line height of the wrapped text within the bullet... I need to add margin-bottom to the li tag. However, li is used for menu items, including nav.

 

I need to target the <p> tags <li> only... in the CSS I started to write:  li p {margin-bottom: xx;}

Can you confirm this is the best method that could work?

 

Thank you.

This topic has been closed for replies.
Correct answer Jon Fritz

Personally, I would give the <ul> or <ol> an id, then target elements within that id with my css selectors.

#onelist p {

   margin-bottom:10px;

}

 

<ul id="onelist">
   <li><p>some text</p></li>

   <li><p>some text</p></li>
</ul>

...as long as you remember that ids can only be used once on a page, there's no chance anything you select within the list with your css will affect anything else on your site.

3 replies

Nancy OShea
Community Expert
Community Expert
February 10, 2020

Please don't make the mistake of using HTML tags as a layout device.  HTML is semantic structure and content only.  Layout styles come from well-crafted CSS.  

 

You are unnecessarily complicating your markup with paragraphs inside lists.  Don't do that.   It makes no semantic sense.  A paragraph is a descriptive block of text beneath a  heading.

 

<h3>I'm a heading</h3>

<p>Hey, look at me I'm a paragraph. </p>

 

A list is a separate element entirely.  It can be either unordered (bulleted), ordered (alpha/numeric), or a definition list.

 

UNORDERED 

<ul>

<li>list item</li>

<li>list item</li>

<li>list item</li>

</ul>

 

ORDERED

<oll>

<li>list item</li>

<li>list item</li>

<li>list item</li>

</oll>

 

DEFINITION

<dl>

<ddt>Title</dt>

<dd>Detail</dd>

<dd>Detail</dd>

</dl>

 

And as Jon said, you can give your list a unique ID as a hook for your CSS styles to latch onto. 

 

Nancy O'Shea— Product User & Community Expert
r_tistAuthor
Inspiring
February 11, 2020

Hi,

 

So, I am looking to target any sets of bulleted points I have within the body of a page, most typically found within the paragraphs...

I will now have to come up with an ID or class name & apply for whenever I'd like bulleted points within the body of the page just to apply that style?

 

Again, it's the list items in the nav that are interfering.

Nancy OShea
Community Expert
Community Expert
February 12, 2020

If yo're competing with navigation styles on the same page, that tells me your selector names are not specific enough.  A navigation set should resemble this:

 

nav {   }

nav ul {   }

nav li {   }

nav li a {   }

etc....

 

<nav>

<ul>

<li><a href="#">Menu Item 1</a></li>

<li><a href="#">Menu Item 2</a></li>

<li><a href="#">Menu Item 3</a></li>

<li><a href="#">Menu Item 4</a></li>

</ul>

</nav>

 

 

 

Nancy O'Shea— Product User & Community Expert
Jon Fritz
Community Expert
Jon FritzCommunity ExpertCorrect answer
Community Expert
February 10, 2020

Personally, I would give the <ul> or <ol> an id, then target elements within that id with my css selectors.

#onelist p {

   margin-bottom:10px;

}

 

<ul id="onelist">
   <li><p>some text</p></li>

   <li><p>some text</p></li>
</ul>

...as long as you remember that ids can only be used once on a page, there's no chance anything you select within the list with your css will affect anything else on your site.

BenPleysier
Community Expert
Community Expert
February 10, 2020

This is correct.

 

As an alternative, you could use line-height instead.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!