Problem with Nth-Child

Asked

Viewed 284 times

7

I have the following scenario:

HTML:

<div class='linha visivel'>Visivel</div>
<div class='linha visivel'>Visivel</div>
<div class='linha oculto' style='display:none'>Invisivel</div>
<div class='linha visivel'>Visivel</div>

CSS:

.visivel:nth-child(odd) { background: yellow }
.visivel:nth-child(even) { background: green }

Result found:

inserir a descrição da imagem aqui

  • 1st line with visible class YELLOW
  • 2nd line with visible class GREEN
  • 3rd line with visible class GREEN

Expected result:

inserir a descrição da imagem aqui

  • 1st line with visible class YELLOW
  • 2nd line with visible class GREEN
  • 3rd line with visible class YELLOW

http://jsfiddle.net/vk6xqnhb/

From what I understand, Nth-Child should paint alternately the Divs with the visible class. But as there is a div hidden in the middle he ends up not doing it properly.

Am I wrong about the behavior? How to correct?

css

  • The same question you have: http://stackoverflow.com/questions/26057925/select-odd-even-child-excluding-the-hidden-child (Marked solution)

  • The behavior is the same, because the selector works based on DOM nodes and does not apply only to what is selected by CSS. What you could do in this case is paint the lines using Javascript, for example.

  • I could do with jQuery, but I was just trying to avoid.

2 answers

3


Based on the comments and the response of the OS in English I had no other solution but to use jQuery:

 $(".visivel:even").css("background-color", "green");
 $(".visivel:odd").css("background-color", "yellow");

Comment from @utluiz on "unexpected behavior":

The behavior is the same, because the selector works based on the nodes DOM and does not apply only to what is selected by CSS.

  • Could explain at least why the behavior occurs? .__.

  • Because the selector nth-child selects the Divs according to the parent. Since the parent of all Divs is the same (body), The invisible div is told to have the same father as the others.

  • Take a look at my answer

1

On the functioning of nth-child(odd) and nth-child(even): When you put even and odd will color even and odd lines respectively.

Another way to do it, without using jQuery, is to create a div and place all elements within it (according to this reply):

.todas {
  line-height: 1.2em;  
  background-color: yellow; 
  background-image: linear-gradient(transparent 50%, green 50%);
  background-size: 100% 2.4em;
}
<div class="todas">
  <div class='linha visivel'>Visivel</div>
  <div class='linha visivel'>Visivel</div>
  <div class='linha oculto' style='display:none'>Invisivel</div>
  <div class='linha visivel'>Visivel</div>
</div>

  • But Nth-Child is bound to the "visible" class, it shouldn’t compute this div with display:None because it doesn’t have the "visible" class, which is strange

  • 1

    @Joaopaulo the nth-child and nth-of-type are treated in the element, and not in the class. algo.classe:nth-of-type() and algo:nth-of-type().classe are synonyms (irrespective of the omission of algo). The nth are computed first in either of the two forms, and only then is the class considered. If you want to change the Hidden condition in JS or not, a gambiarra would use two different tags instead of changing the class dynamically (toggle.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.