CODEWITHSUNDEEP
csshtml-lists
C. Mar
C. Mar

Reputation: 149

Css: How to apply the same list-style-type bullets for html sub-lists?

My html code is:

<!DOCTYPE HTML>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <link rel="stylesheet" type="text/css" href="general.css">
      <link rel="stylesheet" type="text/css" href="common/basicDataTypes/list.css">
   </head>
   <body>
      <div class="title"> title bar</div>
      <p>option 1 -</p>
      <ul class="ul-ident">
         <li>
            <p>test1:</p>
            <ul class="ul-ident">
               <li>
                  <p>subtest1</p>
               </li>
               <li>
                  <p>subtest2</p>
               </li>
               <li>
                  <p>subtest3</p>
               </li>
               <li>
                  <p>subtest4</p>
               </li>
            </ul>
         </li>
         <li>
            <p>test2</p>
         </li>
         <li>
            <p>test3</p>
         </li>
         <li>
            <p>test4</p>
         </li>
         <li>
            <p>test5</p>
         </li>
      </ul>
      <p>option 2 - </p>
      <ul class="ul-ident">
         <li>
            <p>test1</p>
         </li>
         <li>
            <p>test2</p>
         </li>
      </ul>
      <hr>
   </body>
</html>

My css styles is: 

.title {
    text-align: center;
    font-weight: bold;
    border-style: solid;

.ul-ident {
    padding-left: 25px;
}


hr {
    width: 90%;
    border: none;
    height: 3px;
    /* Set the hr color */
    color: green; /* old IE */
    background-color: green; /* Modern Browsers */
}

I need that all bullets will be in disc style, but got for main list items a disc-bullets and for sub-list items a circle-bullets

I read that "The list items will be marked with bullets (small black circles) by default" (source:w3schools )

below current result screenshot: Different bullets in html sub-list

I try IE and chrome, and both gives the same result.

My question: How to make all the bullets in the same list-style-type?

Upvotes: 2

Views: 2188

Answers (2)

caramba
caramba

Reputation: 22480

ul ul {
    list-style-type: disc;
}
<ul class="ul-ident">
         <li>
            <p>test1:</p>
            <ul class="ul-ident">
               <li>
                  <p>subtest1</p>
               </li>
               <li>
                  <p>subtest2</p>
               </li>
               <li>
                  <p>subtest3</p>
               </li>
               <li>
                  <p>subtest4</p>
               </li>
            </ul>
         </li>
         <li>
            <p>test2</p>
         </li>
         <li>
            <p>test3</p>
         </li>
         <li>
            <p>test4</p>
         </li>
         <li>
            <p>test5</p>
         </li>
      </ul>
      <p>option 2 - </p>
      <ul class="ul-ident">
         <li>
            <p>test1</p>
         </li>
         <li>
            <p>test2</p>
         </li>
      </ul>

Lets dig a bit deeper and wonder how to find out which specificity to apply the styles? The simplest way is to use the developer tools. Then mark the elements you are interested in. Then you will see "user agent stylesheet" at the right of the image

enter image description here

Right below the ul ul you will see it overwrites the ul which contains the style you are looking for.

Update after comment: You can use CSS inherit to use styles defined from a parent element to the child element. See in this example, I've added another nesting level. So the first level is defined to circle, 2nd level is defined to square and all next levels will inherit the square cause sqaure is the defined parent..

ul {
    list-style-type: circle;
}

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

ul ul ul {
    list-style-type: inherit;
}
<ul>
    <li>circle
        <ul>
            <li>square
                <ul>
                    <li>inherit
                        <ul>
                            <li>inherit</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Upvotes: 5

לבני מלכה
לבני מלכה

Reputation: 16251

You can set list-style-type: none; and use li:before and apply style to create the "dot"

.title {
  text-align: center;
  font-weight: bold;
  border-style: solid;
}

.ul-ident {
  padding-left: 25px;
  list-style-type: none;
}

.ul-ident li {
  position: relative;
}

.ul-ident li:before {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  background: black;
  top: 6.5px;
  left: -11px;
  border-radius: 50%;
}

hr {
  width: 90%;
  border: none;
  height: 3px;
  /* Set the hr color */
  color: green;
  /* old IE */
  background-color: green;
  /* Modern Browsers */
}
<div class="title"> title bar</div>
<p>option 1 -</p>
<ul class="ul-ident">
  <li>
    <p>test1:</p>
    <ul class="ul-ident">
      <li>
        <p>subtest1</p>
      </li>
      <li>
        <p>subtest2</p>
      </li>
      <li>
        <p>subtest3</p>
      </li>
      <li>
        <p>subtest4</p>
      </li>
    </ul>
  </li>
  <li>
    <p>test2</p>
  </li>
  <li>
    <p>test3</p>
  </li>
  <li>
    <p>test4</p>
  </li>
  <li>
    <p>test5</p>
  </li>
</ul>
<p>option 2 - </p>
<ul class="ul-ident">
  <li>
    <p>test1</p>
  </li>
  <li>
    <p>test2</p>
  </li>
</ul>
<hr>

Upvotes: 0

Related Questions