Inspiring

Answered

target list items of paragraph style only

8 replies
1378 views
Translate

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 is closed to new replies. Start a new post to keep the conversation going.

Jon FritzCorrect answer

Community Expert

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;

}

<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

Community Expert

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>

</ul>

ORDERED

<oll>

</oll>

DEFINITION

<dl>

<ddt>Title</dt>

<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.

Translate

Nancy O'Shea— Product User & Community Expert

R

r_tistAuthor

Inspiring

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.

Translate

Nancy OShea

Community Expert

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>

</ul>

</nav>

Translate

Nancy O'Shea— Product User & Community Expert

Jon Fritz

Correct answer

Community Expert

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;

}

<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.

Translate

BenPleysier

Community Expert

This is correct.

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

Translate

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.