How to shade odd but only visible titles?

Question

.test{
display:none;
}

.title:nth-child(odd){
  background: #ddd;
}

<div class='title'>lorem</div>
<div class='title'>lorem</div>
<div class='title test'>lorem</div>
<div class='title'>lorem</div>
<div class='title'>lorem</div>
<div class='title'>lorem</div>
<div class='title'>lorem</div>

if test is visible - there is no problem - odd titles are shaded.

if test is not visible - shading rule is lost.

How to shade odd but only visible titles?

Possible duplicate of [Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?](https://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-an-arbitrary-selector) — Joseph Sible-Reinstate Monica, Oct 05 '18 at 03:41
Possible duplicate of [How to get nth-child selector to skip hidden divs](https://stackoverflow.com/questions/32355054/how-to-get-nth-child-selector-to-skip-hidden-divs) — Kiki, Oct 05 '18 at 03:51
@JosephSible, on your link accepted answer is seven (7) years old. How one can be sure that it is currently correct? — , Oct 05 '18 at 03:53
@puerto Because on Stack Overflow, answers can be edited if they become incorrect. — Joseph Sible-Reinstate Monica, Oct 05 '18 at 03:54
@JosephSible, of course, but how one can be sure that it IS edited? — , Oct 05 '18 at 03:55
@puerto https://meta.stackoverflow.com/questions/260718/duplicates-of-old-cobwebbed-questions — Joseph Sible-Reinstate Monica, Oct 05 '18 at 03:58
@JosephSible your link doesn't help again. It only repeats my question, but without final answer. — , Oct 05 '18 at 04:06
@puerto, even though the answers are old, they are relevant - see the accepted answer in [How to get nth-child selector to skip hidden divs](https://stackoverflow.com/questions/32355054/how-to-get-nth-child-selector-to-skip-hidden-divs)... there is no pure css solution to this — kukkuz, Oct 05 '18 at 04:10
@kukkuz, thanks for your info that the answer is still valid. One thing is answer, but another thing is - how to know if it is valid after 7 year. What a bureaucratic mind on Stack Overflow. — , Oct 05 '18 at 04:17
@puerto Please see the accepted answer on the first suggested duplicate. I'll confirm it's up to date, even including the not-yet-implemented functionality. I've already cast a close vote for the duplicate. — jhpratt, Oct 05 '18 at 04:24
@puerto its still valid man, with `nth-child` if a *sibiling* is hidden you can't do much in this situation, its not possible in pure css even now... — kukkuz, Oct 05 '18 at 04:31

zer00ne · Answer 1 · 2018-10-06T02:10:24.927

0

Pure CSS Solution

Two Pure CSS Solutions

Solution 1

Make the parent node (<body> in this case) a flex column container
Change .title:nth-child(odd) to (even)
Assign order: 3 to the adjacent sibling .test + div

Explanation

Because .test is still in the HTML, it will always be considered to be in the odd position hence changing the shading pattern to even rectifies that situation. Using the order flexbox property allows us to visually move a tag, but as far as the HTML code itself, the positions are still the same. Placing the 4th div into the 3rd visibly doesn't change it to become odd, it will retain the shade of an even tag.

Soilution 2

Make all <div> color:transparent
Assign each dive a ::before pseudo-class content:n n=original position number/for 3+ offset by +1
All div::before color:#000
Explanation

This solution uses ::Before to present the title of what's in that position rather than what is actually there. So 1 and 2 are accurate but at the third position it is now 4 and so on. The last title is display:none instead of position 3 .test. This complex solution came about when JosephSible brought to my attention that the titles weren't in order so Solution 1 "doesn't work", while I beg to differ since the OP never mentioned order, Solution 2 isn't broken. Please review Demo2.

Demo 1

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      display: flex;
      flex-flow: column nowrap;
    }
    
    .title:nth-child(even) {
      background: #ddd;
    }
    
    .test {
      display: none;
    }
    
    .test+div {
      order: 3
    }
  </style>
</head>

<body>
  <div class='title'>lorem</div>
  <div class='title'>lorem</div>
  <div class='title test'>lorem</div>
  <div class='title'>lorem</div>
  <div class='title'>lorem</div>
  <div class='title'>lorem</div>
  <div class='title'>lorem</div>
</body>

</html>

Demo 2

<!DOCTYPE html>
<html>

<head>
  <style>
    .title:nth-child(even) {
      background: #ddd;
    }
    
    div {
      color: transparent;
    }
    
    .test {
      background: #ddd;
    }
    
    div:first-of-type::before {
      content: '1';
    }
    
    div:nth-of-type(2)::before {
      content: '2';
    }
    
    .test::before {
      content: '4'
    }
    
    .test+div::before {
      content: '5'
    }
    
    .test+div+div::before {
      content: '6'
    }
    
    .test+div+div+div::before {
      content: '7';
    }
    
    .test+div+div+div+div {
      display: none;
    }
    
    div::before {
      color: #000
    }
  </style>
</head>

<body>
  <div class='title'>1</div>
  <div class='title'>2</div>
  <div class='title test'>3</div>
  <div class='title'>4</div>
  <div class='title'>5</div>
  <div class='title'>6</div>
  <div class='title'>7</div>
</body>

</html>

edited Oct 06 '18 at 02:10

answered Oct 05 '18 at 04:42

zer00ne

41,936
6
41
68

This doesn't actually work. It only looks like it does because all of the divs have the same text. If you put unique text in them, you'll see that this scrambles the order. – Joseph Sible-Reinstate Monica Oct 05 '18 at 20:07
@JosephSible Here's the OP's question: *"How to shade odd but only visible titles?"* in what way does this not work? Are all visible titles shaded in an alternating pattern of even white and odd `#ddd`? Scrambling the order by moving the 4th title to the bottom isn't the end of the world. CSS is a declarative pseudo-language that flows in an unalterable direction what I've already done defies that pretty well presentation wise. – zer00ne Oct 05 '18 at 23:02
1

Your answer is basically that of a Literal Genie: exactly what he asked for, strictly speaking, but not at all what he wanted. Given 12X3456 and X hidden, he wanted to see 123456 with shading behind 1, 3, and 5. Your answer shows him 124563 with shading behind 1, 4, and 6. – Joseph Sible-Reinstate Monica Oct 05 '18 at 23:07
There's no way that the OP wanted you to rearrange the order of words on the page in the process of fixing the shading. – Joseph Sible-Reinstate Monica Oct 05 '18 at 23:07
Wow you certainly know what the OP want's in every detail. Did the OP secretly communicate these non-important criteria? Shading behind 3 visible? Number 3 has been hidden. Look CSS is pure presentation, Everything I've done doesn't touch the DOM nor does it alter HTML or content. Do you have a problem using `display:none`? If not then why are about the offset of titles to **PRESENT** the correct order? **PRESENTATION** please I implore you to look that up. Take a look at this [screenshot](https://imgur.com/a/ZUMmNOm) and tell me where is this order of: 124563 appearing? – zer00ne Oct 06 '18 at 00:31
Now that you're duplicating the content in the CSS (which is completely impractical) it doesn't. If you only put the content in the HTML and not in the CSS, it does exactly what I said. – Joseph Sible-Reinstate Monica Oct 06 '18 at 00:32
Using CSS is impractical if HTML can be edited (not a possibility for n00bs with WP or CMS, or simular cookie-cutter sites.) *"If you only put the content in the HTML and not the CSS..."* Did you read what I wrote? HTML is untouched, CSS is **PRESENTATIONAL** . The pseudo-classes aren't even recognized by DOM. *"...it does exactly what I said"* Of course it will if you change the content and it will change if you applied it to the OP code. What's your point? Are you reading anything I wrote or you just trolling? – zer00ne Oct 06 '18 at 00:40
You hardcoded the TEXT THAT THE DIVS ARE TO DISPLAY in the CSS. That's what HTML is for. You're shouting that CSS is presentational but your own answer is violating that. – Joseph Sible-Reinstate Monica Oct 06 '18 at 00:44
*"Hardcoded the text that **DISPLAYS** (i.e. **PRESENTS**) in the CSS."* Yes that's exactly what I did, and CSS is not the representation of the structure of what HTML truly is it is style, a visual facade . By your logic CSS should not be used to alter, remove, nor add any styles that obscure HTML content. So you are telling me that it's wrong to hide a `
` with `display:none` when I could edit the `
` all together? The very purpose CSS is to do exactly that. My answer only violates your poor grasp of what CSS is. The user sees only what the developer wants the user to see capice?
– zer00ne Oct 06 '18 at 02:04
You don't even have any badges in CSS or HTML that's like me arguing about Java with you. By the looks of your comments with OP, your insistence that this question is a duplicate (whether it does or not isn't the point) or not do not coincide with the arguments of what the OP was asking when you try to invalidate my answer. You are confrontational and my sympathies go out to you. I'm sorry for your sickness, I hope there's a cure for it someday, God bless, sir. – zer00ne Oct 06 '18 at 02:26

How to shade odd but only visible titles?

1 Answers1

Pure CSS Solution

Two Pure CSS Solutions

Solution 1

Explanation

Soilution 2

Explanation

Demo 1

Demo 2