Highlighted

target list items of paragraph style only

Enthusiast ,
Feb 09, 2020

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Jon_Fritz_II | Adobe Community Professional

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.

Topics

Code, How to

Views

561

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

target list items of paragraph style only

Enthusiast ,
Feb 09, 2020

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Jon_Fritz_II | Adobe Community Professional

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.

Topics

Code, How to

Views

562

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Feb 09, 2020

Copy link to clipboard

Copied

This is correct.

 

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Feb 10, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Feb 10, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Enthusiast ,
Feb 10, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Feb 11, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Feb 11, 2020

Copy link to clipboard

Copied

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?


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Enthusiast ,
Feb 10, 2020

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
osgood_ LATEST
LEGEND ,
Feb 12, 2020

Copy link to clipboard

Copied

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!

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Learn Resources
Add a group