CSS nth-of-type selector with nested elements
I basically need a selector that counts the boxes as if they were all direct children of the same parent .container (as if the .inner-container would not exist).
Assuming there will only be exactly one inner container — and no other elements besides .box
and .inner-container
— you'll need to use :nth-child()
on the inner container to determine its position relative to its .box
siblings (not its .box
children), and thus determine whether to alternate the background on its contents one way or the other:
.container > .box:nth-child(even) {
background-color: #bb3333;
}
.container > .inner-container:nth-child(odd) > .box:nth-child(even),
.container > .inner-container:nth-child(even) > .box:nth-child(odd) {
background-color: #bb3333;
}
Here's a demo with the boxes appropriately labeled so you can see how each selector works.
Note that if you have any boxes that could appear after the inner container, you'll need to be able to count the number of children the inner container has before you can determine how to start counting from that point. This will not be possible with just CSS because selectors cannot ascend from inner elements to outer elements. There are workarounds using JavaScript, but I suspect this is outside the scope of the question at hand.
CSS nth-child on nested divs with different classes
You are targetting the wrong element for nth-child
. Currently you are targetting .white-bg
but that will always be odd because there is only one of this element within its scope.
Instead you want to alternate between the .white-bg-alt
element.
So a simple change to the following will solve your problem:
.white-bg-alt:nth-child(odd) .white-bg {
background-color: #EAEAE3;
border-top: 0px;
}
.white-bg-alt:nth-child(even) .white-bg {
border-bottom: 2px;
background-color: #FFF;
}
.white-bg-alt:nth-child(odd) .white-bg .colored-p {
background-color: #FFF;
}
.white-bg-alt:nth-child(even) .white-bg .colored-p {
background-color: #EAEAE3;
}
How to apply CSS to nth nested element?
If you want to apply the CSS last-child then you can try this code:
You can add the class for every div
.parent div:nth-last-child(1) .target{
background: #000000;
color: #fff;
}
Why doesn't nth-of-type/nth-child work on nested elements?
:nth-of-type()
is similar to :nth-child()
in that they must all be from the same parent. If you need those wrapper div
s, use :nth-of-type()
on those wrappers instead:
div.post:nth-of-type(odd) .video-entry-summary {
width:214px;
height:210px;
margin-left:0px;
float:left;
position:relative;
overflow:hidden;
border:1px solid black;
background:#ccc;
}
If all the siblings are .post
, use :nth-child()
instead to prevent confusion with what :nth-of-type()
really means:
.post:nth-child(odd) .video-entry-summary {
width:214px;
height:210px;
margin-left:0px;
float:left;
position:relative;
overflow:hidden;
border:1px solid black;
background:#ccc;
}
.video-entry-summary { width: 214px; height: 210px; margin-left: 10px; float: left; position: relative; overflow: hidden; border: 1px solid black;}
.post:nth-child(odd) .video-entry-summary { width: 214px; height: 210px; margin-left: 0px; float: left; position: relative; overflow: hidden; border: 1px solid black; background: #ccc;}
<div id="post-501" class="post-501 post type-post status-publish format-standard hentry category-moto-dz-films tag-news-sub-2"> <div class="video-entry-summary"> video 1 </div></div>
<div id="post-240" class="post-240 post type-post status-publish format-standard hentry category-videos"> <div class="video-entry-summary"> video 2 </div></div>
<div id="post-232" class="post-232 post type-post status-publish format-standard hentry category-videos"> <div class="video-entry-summary"> video 3 </div></div>
<div id="post-223" class="post-223 post type-post status-publish format-standard hentry category-videos"> <div class="video-entry-summary"> video 4 </div></div>
How to select nth-child in SASS within a nested selectors
If you need to group the selectors in this way - I recommend using the @at-root directive.
The @at-root directive causes one or more rules to be emitted at the
root of the document, rather than being nested beneath their parent
selectors.
.group-left {
.clip-item & {
padding: 0;
}
@at-root .clip-item &:nth-child(2n+1) {
background: blue;
}
@at-root .clip-item &:nth-child(2n+2) {
background: gray;
}
}
.group-right {
.clip-item & {
padding: 0;
}
@at-root .clip-item &:nth-child(2n+1) {
background: blue;
}
@at-root .clip-item &:nth-child(2n+2) {
background: gray;
}
}
Codepen demo (View compiled CSS)
Also, this CSS-tricks post may help:
The
&
doesn't allow you to selectively traverse up your nested
selector tree to a certain place and only use a small portion of the
compiled parent selector that you want to use.
By the way:
Even though it's working, I don't think it's the right way
Well actually, your SCSS is not currently producing the requested CSS.
Related Topics
CSS - Vertically Center an Image Within a Floated Div
How to Center Text Inside an Svg Path
Firefox Support for Alignment-Baseline Property
What Is the Meaning of the "@Include" in .CSS Files
Line Height Default Value If Font Size Is 100%
CSS Grid Vertical Columns with Infinite Rows
Draw a Line That Doesn't Get Thicker When Image Stretches
Edit Microsoft Chatbot UI Design
CSS Resize Property - Change Resize Icon Properties
Reliable Solution for Conditional Comments in Outlook.Com HTML Emails
CSS Circle Border Fill Animation
Evenly-Spaced Navigation Links That Take Up Entire Width of Ul in CSS3
Color (Colour) Differences Between Browsers
In CSS Grid Layout, Do We Count the Span Even Starting on Implicit Grid Lines
How to Create Circle with Four Quarters
Javafx Text Styling for Dynamic Objects