CODEWITHSUNDEEP
htmlcss
UserX
UserX

Reputation: 1337

It is possible to give list-style-type for some elements of <li> and for others dont?

I have a list of answers. And I have inside each list item <li> the number of the answer, a paragraph ("test..."), and two links.

And I want to have a list-style-type: circle; in my links. But my links aren´t <li> elements, they are inside a <li> element.

Do you know if it is possible do something like this?

I have my code here: http://jsfiddle.net/x9ww2qpd/1/

enter image description here

Upvotes: 8

Views: 2616

Answers (5)

John Slegers
John Slegers

Reputation: 47111

SOLUTION 1

To make your links both (1) look like a list item and (2) behave like a list item, you should set the display, list-style-type and list-style-position attributes of that element.

You should also remove the <br /> elements behind of your list items.

EXAMPLE CODE :

* {
    margin: 0;
    padding: 0;
}

#answers{
    float:left;
    width:100%;
    margin-top:20px;
}

#answers ul{
    list-style:none;
}

#answers ul li{
    margin-bottom:30px;
}

#answers ul li a{
    display: list-item;
    list-style-position: inside;
    list-style-type: circle;
    margin-left:30px;
}
<div id="answers">
    <ul>
        <li>
            <h4>Answer 1</h4>
            <p> test  test test test test test test test test test test test test testtest  testtest test  test test</p>
            <span>Saber mais:</span><br/>
            <a href="#">Who are we?</a>
            <a href="#">Who are we?</a>
        </li>
    </ul>
</div>

THE FIDDLE :

http://jsfiddle.net/x9ww2qpd/5/

SOLUTION 2

As an alternative to solution 1, you can just wrap your a elements in list elements.

Here, you should also remove the <br /> elements behind of your list items & add some additional styling for list within lists.

EXAMPLE CODE :

* {
    margin: 0;
    padding: 0;
}

#answers{
    float:left;
    width:100%;
    margin-top:20px;
}

#answers ul{
    list-style:none;
}

#answers ul li{
    margin-bottom:30px;
}

#answers ul ul{
    list-style:circle;
    list-style-position: inside;
}

#answers ul ul li{
    margin-bottom:0;
    margin-left: 30px;
}
<div id="answers">
    <ul>
        <li>
            <h4>Answer 1</h4>
            <p> test  test test test test test test test test test test test test testtest  testtest test  test test</p>
            <span>Saber mais:</span><br/>
            <ul>
                <li><a href="#">Who are we?</a></li>
                <li><a href="#">Who are we?</a></li>
            </ul>
        </li>
    </ul>
</div>

THE FIDDLE :

http://jsfiddle.net/x9ww2qpd/6/

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201896

If you want or need to do this without changing the HTML markup, set the display property to list-item for the elements that you wish to display as items of a bulleted list and prevent the effect of the <br/> tags. Example:

#answers a { display: list-item;  }
#answers br { display: none; }

Note that these affect all a and br elements inside the block with id="answers". It is not clear whether this is desired.

The point is that list-style-type just sets the style of the bullet or other marker, if one is used. It does not cause the marker to appear. Or, in other words, that property affects only elements that have display: list-item.

Better, if you can change the markup, just use <ul> and <li> markup for elements that you want to display as a bulleted list.

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 241278

Without changing the HTML, you could always use the :before pseudo element, along with the escaped content value '\2022'. Just change the font-size of the element accordingly.

Example Here

#answers ul li a:before {
    content:'\2022';
    display: inline-block;
    padding-right: 10px;
}

Upvotes: 4

haxxxton
haxxxton

Reputation: 6442

If you're okay with using CSS3 pseudo elements instead of a nested ul li implementation, you could use :before to create the "bullet". This will also give you more control over the visual style and position of the bullet.

#answers ul li a{padding-left:30px; position:relative;}
#answers ul li a:before{content:" "; position:absolute; top:50%; left:24px; border-radius: 100%; background: black; height:4px; width:4px; margin:-4px;}

FIDDLE DEMO

Upvotes: 2

Leo Bedrosian
Leo Bedrosian

Reputation: 3799

So just make them <li> elements. For example:

<h4>Answer 1</h4>
<p> test  test test test test test test test test test test test test testtest  testtest test  test test</p>
<span>Saber mais:</span><br/>
<ul>
    <li><a href="#">Who are we?</a></li>
    <li><a href="#">Who are we?</a></li>
</ul>

You can nest ordered/unordered lists to whatever depth you want. Then apply the CSS style as desired to the list.

Upvotes: 7

Related Questions