target list items of paragraph style only

[r_tist]

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.

[BenPleysier]

This is correct.

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

[Jon Fritz · Accepted solution]

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.

[Nancy OShea]

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. 

[r_tist]

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]

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>

[BenPleysier]

I tend to agree with this approach from Nancy and that is why I stated that @r-tist's original selector (ul p) was correct. Why introduce ID's and Classes when all paragraphs within a list need to have a bottom margin.

Having said that, there are alternative views such as https://frontstuff.io/you-need-to-stop-targeting-tags-in-css, but I tend to believe this article: https://medium.com/@carsonf92/precise-targeting-with-css-selectors-745237a050b6

Too long to read: KISS (Keep It Simple Stupid)

Edit: I am not saying that Jon's answer is wrong, in fact it may even help third party developers to understand the methods being used. After all <p class="mystyle"> will tell others that a style rule exists for that paragraph. But what happens if all paragraphs in your project need to adhere to that style rule?

[r_tist]

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!

[osgood_]

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!