Do not dynamically select always the last row in the hierarchy

Question

Do not dynamically select always the last row in the hierarchy

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Look at the HTML and CSS below.

This is the initial CSS

ul ul li:nth-last-of-type(2){
  background: #ff0000;
}

<ul>
  <li>bla
    <ul>
      <li>bla bla
        <ul>
          <li>bla bla bla</li>
          <li>Gostaria que não fosse selecionado</li>
          <li>bla bla bla</li>
        </ul>
      </li>
      <li>Selecionado</li>
      <li>bla bla</li>
    </ul>
  </li>
  <li>bla
    <ul>
        <li>Selecionado</li>
        <li>bla bla</li>
      </ul>
  </li>
  <li>bla</li>
</ul>

The manual solution would do this

ul ul ul li:nth-last-of-type(2){
  background: initial;
}

But I did not want to do that. Assuming that if I add to the ul deeper in the hierarchy the li below.

<li>
  bla bla bla
  <ul>
    <li>Agora esse não deve mais ser selecionado</li>
    <li>Bla bla bla bla</li>
  </ul>
</li>

ul ul ul ul li:nth-last-of-type(2){
  background: initial;
}

That is, this CSS is not sustainable. With each new node in ul deeper I will have to maintain the CSS every time, adding a new ul in the hierarchy to restart the property. How do I make it dynamic?

css css3

asked by anonymous 01.10.2014 / 17:12

2 answers

How to create a WordPress theme / template that updates itself? [closed] How to retrieve content from a cookie

score 1 · Answer 1

1

What if you did something like this?

li > ul > li {
    background: #ff0000;
}

li > ul > li:first-child,
li > ul > li:last-child {
    background: initial;
}

01.10.2014 / 20:00

score 1 · Answer 2

Use 'id' or 'class' selectors

html

<li class="lista1">
</li>

or

<li id="lista2">
</li>

css

.lista1 {color:blue}
'#lista2 {color:green}

Whenever you identify a tag with these selectors it will assume the properties of the code in css.

See help link