• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 48
  • Last Modified:

List Styles

Hello Experts,

How can I get the nested values inside of my <ul> and or <ol> to have the same styles?

For example, if you look at my code below I would like the circle to appear when nested. As of now, if I try to nest the <ul> or <ol> I get different list-type-styles.

<ul class="circle">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
 </ul>

Open in new window

<ul class="circle">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
 </ul>

Open in new window

0
asp_net2
Asked:
asp_net2
  • 5
  • 4
  • 2
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
ul and ol are two different tags.  <ul> is unordered list and will give you bullets.  ol is an ordered list and will give you a numbered list.   I couldn't see any difference in your given code though.  http://jsbin.com/vaqohi/1/edit  Maybe post the a link to your page with your css or update the jsbin to match what you are getting.
0
 
asp_net2Author Commented:
What I'm trying to accomplish is this:

If I give the first ul tag a class of square to make all list markers squares then I need all nested ul tags within the main one to have square markers.

 In the example that you provided in the link the ul tags change style as you nest them.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
There are other more dynamic ways you can write the jquery code, but this is easy to see.  I am simply looking at all the ul class="square" and their child li's and adding css for list-style-type.

http://jsbin.com/vaqohi/2/
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script>
    $(function(){
  $('ul.square li').css('list-style-type', 'square');
  $('ul.circle li').css('list-style-type', 'circle');
  $('ul.disc li').css('list-style-type', 'disc');
});
  </script>
  <meta charset="utf-8">
  <title>padas Q_28629462</title>
</head>
<body>
  
<ul class="circle">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
 </ul>
  <hr>
  <ul class="square">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
 </ul>
  <hr>
  <ul class="disc">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
 </ul>
</body>
</html>

Open in new window

0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
asp_net2Author Commented:
I'm confused, why would you use jquery for this? Why not, just CSS. Also, what does this have to do with nested UL and or OL tags?

I looked into this just a little bit ago and I think the fix would be this below, your thoughts?

ul.square {
 list-style-type: square;
}

ul ul {
 list-style-type: inherit;
}
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It does the same thing.   If you needed to do something dynamic, using javascript may be a good choice.  If you can just as easily add the right css on the fly or statically I would use that option.  You don't even need css, you can specify the type as in <ul type="square">.  There are multiple ways to get the same visual effect.  Use what is best for your situation.
0
 
asp_net2Author Commented:
But what is the best method to have the style "square" apply to nested ul's?
0
 
Alicia St RoseOwner & Principle Developer/DesignerCommented:
You can try this:

ul.square, ul.square > ul > ul {
		list-style: square;
	}
	ul.circle, ul.circle > ul > ul {
		list-style: circle;
	}

Open in new window


It will take you nested three deep.
0
 
Alicia St RoseOwner & Principle Developer/DesignerCommented:
Sorry!
Here's better code:

ul.square,
	ul.square > ul,
	ul.square > ul > ul {
		list-style: square;
	}
	ul.circle,
	ul.circle > ul,
	ul.circle > ul > ul {
		list-style: circle;
	}

Open in new window

0
 
asp_net2Author Commented:
laughhearty,

That's to much nesting. General rule is that you should not nest more than 4.

I believe I just need ul ul list-style-type: inherit
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What is best?  The answer is that depends on what you are doing.

If this is static, then simply using css is a good choice.   I probably shouldn't have assumed you were dynamically generating the content.   If that is the case, I am in the habit of using javascript.

Keep in mind the way a page is created if you are using server side code like asp/php do dynamically generate your data is that server side code runs and when the rendered html, css and js is created via your server side code, it loads as if it was a statically created page. Once the HTML and CSS are loaded, then your javascript is loaded.   If you change css via javascript and run the page in slow motion, you will see it load one way, then as the js runs it will transform as coded or break if there is a javascript error.  Most of the time this happens so fast you can't tell the difference.  Some people will add a little ajax animation until the page fully loads to prevent FOUT (Flash Of Un styled  Text) if that is being manipulated by js in the case of some special fonts. I personally do not like that and will not use it.

Back to your answer, the best way is it depends on your use case.  We can only see what you have above and many times we make up in our heads what you are actually doing.  If you would like to elaborate on what you are doing, perhaps we can give you different advice.

If the pure css is working for you, then use that.
0
 
asp_net2Author Commented:
I believe the better solution would have just used ul ul { list-style-type: inherit; } from what I have read.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

  • 5
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now