All geek questions in one place

How to apply bold to the first LI elements in a nested structure

I thought something like:

#list li > a {
  font-weight: bold;
}

But this applies to every LI binding. I want only top-level elements to be highlighted by non-nested LIs in LIs - if that makes sense? :)

EDIT |

  <ul id="list">
    <li><a href="#">A</a>
        <ul>
            <li><a href="#">B</a>
                <ul>
                    <li><a href="#">C</a></li>
                    <li><a href="#">D</a></li>
                </ul>
            </li>
            <li><a href="#">E</a></li>
        </ul>
    </li>
    <li><a href="#">F</a></li>
    <li><a href="#">G</a></li>
    <li><a href="#">H</a></li>
  </ul>
+4
source share
3 answers

You need to add a little more specificity to your selector:

#list > li > a

This targets anyone awho is a direct descendant li, who is a direct descendant #list(which I assume is external ul, although this is not indicated in your example).

You can see it in action at http://jsbin.com/segig/1/edit?css,output .

, .

+1

CSS

, , CSS

  • first-line first-child

:

JSBIN

http://jsbin.com/dogol/1/edit

HTML

<html>
  <body>
<ul>
    <li class="ml"><a href="#">A</a>
        <ul>
            <li><a href="#">B</a>
                <ul>
                    <li><a href="#">C</a></li>
                    <li><a href="#">D</a></li>
                </ul>
            </li>
            <li><a href="#">E</a></li>
        </ul>
    </li>
    <li class="ml"><a href="#">F</a></li>
    <li  class="ml"><a href="#">G</a></li>
    <li class="ml" ><a href="#">H</a></li>
  </ul>
  </body>
</html>

CSS

.ml:first-line
{
  font-weight: bold;
}
+1

I don't think you can stop the cascading css effect, so you will need to specify the class as you go. Demo Screenshot

HTML:

            <ul class="first">
                <li><a href="#">A</a>
                    <ul class="innerfirst">
                        <li><a href="#">B</a>
                            <ul>
                                <li><a href="#">C</a></li>
                                <li><a href="#">D</a></li>
                            </ul>
                        </li>
                        <li><a href="#">E</a></li>
                    </ul>
                </li>
                <li><a href="#">F</a></li>
                <li><a href="#">G</a></li>
                <li><a href="#">H</a></li>
              </ul>

CSS:

            .first {
              font-weight: bold;

            }

            .innerfirst {
                font-weight: normal;
            }
+1
source

Source: https://habr.com/ru/post/1527057/

More articles:


All Articles