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

    I bit the bullet... I added a class name to target them. I will need to remember to do that manually within the markup for every page though wherever bullets are found. I am curious how that would be handled in a content management system automatically for a user who was inputting text, a copywriter?

     

    Thanks for the clarification!

    O
    osgood_
    Legend
    February 12, 2020

    Personally I steer clear of introducing too many classes, its poor practice used by those who jump onto poor frameworks, produced usually by devs who have little front end coding experience, especially in cases like:

     

    <li class="this_is_dumb">Link One</li>

    <li class="this_is_dumb">Link Two</li>

    <li class="this_is_dumb">Link Three</li>

    <li class="this_is_dumb">Link Four</li>

    <li class="this_is_dumb">Link Five</li> 

     

    You're much better off just targeting the parent container:

     

    .parent li {

    Blah: Blah;

    Blah: Blah;

    }

     

    <div class="parent">

    <ul>

    <li>Link One</li>

    <li>Link Two</li>

    <li>Link Three</li>

    <li>Link Four</li>

    <li>Link Five</li>

    </ul>

    </div>

     

    Keep it simple, keep it sweet and you won't go too far wrong. Make it more complex than what it really should be and you're stepping right into trouble............but you can't tell em, those that uses such workflows!

     

    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