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

LVL 4
asp_net2Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.