combining :nth-child with :not() selectors
Question
I'm trying to learn css, but experiencing some problems with it. How can I select every third block, except invicible block from counting?
When I using div.col-12:nth-child(3n+3) {background:blue} it doesn't work properly, counting invisible block as all other. I've tried to add :not([id="invisible"]) to it, but it doesn't work at all.
div.col-12:nth-child(3n+3) { background: blue }
<div class=parent> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div id="invisible"></div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div>
1 answers
solution1
3 2019-02-11 21:50:07
EDIT
:nth-of-type & :not()
Demo 2
Since OP can't modify HTML (dynamically rendered?) -- we can use the :not() selector and a negative starting point for the :nth-of-type count. That's the first ruleset below which almost works but the first .col-12 is blue. So the second ruleset below changes the first .col-12 back to white. The reason why :not() is used again is because the :not(#invisible) in the first ruleset has a very high specificity because an id is used -- adding .col-12 to second ruleset gives higher specificity than the first ruleset.
body > div > div:nth-of-type(3n-2):not(#invisible) { background: blue } body > div > div.col-12:first-of-type:not(#invisible) { background: white }
:nth-of-type
Demo 1
Change #invisible into anything but a <div> then use :nth-of-type . nth-of-type only considers tagName s like div , or section , so by changing #invisible to another tag you will exclude it. Also use the child combinators > to "lock" it in. In your layout there's a lot of <div> s so this:
div:nth-child(3n+3) //The +3 might be a reaction to the unexpected results?
Will consider all <div> s that are children of anything. This on the other hand:
body > div > div:nth-of-type(3n)
narrows down possibilities. The direct descendant (or child) of <body> is .parent then only consider the children of .parent . Now .block1 and .block2 are never considered (it doesn't affect your layout per say because of 3n but it's best to consider it in the future).
Demo 1
.col-12 { outline: 3px dashed red } body>div>div:nth-of-type(3n) { background: blue }
<div class=parent> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <aside id="invisible"></aside> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> </div>
Demo 2
.col-12 { outline: 3px dashed red } body>div>div:nth-of-type(3n-2):not(#invisible) { background: blue } body>div>div.col-12:first-of-type:not(#invisible) { background: white }
<div class=parent> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div id="invisible"></div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> <div class="col-12"> <div class="block1"> <a class="link">link</a> </div> <div class="block2"> <p class="text">some text</p> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.