nth-child – Blackbams Blog https://blog.blackbam.at development - digital arts - internet Wed, 08 Apr 2015 22:27:14 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.1 CSS: NTH-Child selector ignore hidden element https://blog.blackbam.at/2015/04/09/css-nth-child-selector-ignore-hidden-element/ https://blog.blackbam.at/2015/04/09/css-nth-child-selector-ignore-hidden-element/#respond Wed, 08 Apr 2015 22:27:14 +0000 https://blog.blackbam.at/?p=2223 Recently I discovered some short solution for ignoring a single hidden element with the nth-child selector. If you struggle with the same problem the following might be useful:

This is the HTML:

a
b
c
d
e

The following CSS adds a margin right to every second visible element no matter which element has the cpw class.

.cpw {
    display:none;
}

.video_prewrap {
    margin-right:20px;
}

.video_prewrap:nth-child(2n) {
    margin-right:0;
}

.cpw ~ .video_prewrap:nth-child(2n) {
    margin-right:20px;
}

.cpw ~ .video_prewrap:nth-child(2n-1) {
    margin-right:0;
}

Share

]]> https://blog.blackbam.at/2015/04/09/css-nth-child-selector-ignore-hidden-element/feed/ 0