Skip to main content
R
r_tist
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
Nancy OSheaCommunity 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
    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
    Nancy OSheaCommunity 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
    BenPleysierCommunity 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!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices