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 divs, 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>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.
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;
}
Cannot target an element inside other element by nth-child
You need to select the nth-child of the ul (the parent). So you need to target the li elements:
.nav-social
{
li
{
a
{
margin-right: 0.5rem;
i
{
font-size: 1.5rem;
// border: 1px solid red;
border-radius: 50%;
background: rgba(0, 0, 0, 0);
color: whitesmoke;
width: 35px;
height: 35px;
text-align: center;
line-height: 35px;
}
}
&:nth-child(1)
{
a
{
i
{
color: green;
}
}
}
}
}
How to properly cycle through nth-of-type?
You need to target the parent element col-sm-4, select the nth-of-type from the list and then descend inside to select cycle-colour-bg.
Your current code would have worked if all the masonary items were inside col-sm-4
.col-sm-4:nth-of-type(3n+1) .cycle-colour-bg { /* Target 1, 4 and 7 */ background-color: #707272;}
.col-sm-4:nth-of-type(3n+2) .cycle-colour-bg { /* Target 2, 5 and 8 */ background-color: #57caee;}
.col-sm-4:nth-of-type(3n+3) .cycle-colour-bg { /* Target 3, 6 and 9 */ background-color: #106db6;}<div class="col-sm-4"> <article class="masonary flex-cell"> <div class="featured-image-secondary inner-border-10"> <img src="some-image-url"> </div>
<div class="post-body-secondary cycle-colour-bg"> <p class="fw700 post-title-secondary void-colour">Some Title</p> <a href="Some-Link">Read More</a> </div> </article></div>
<div class="col-sm-4"> <article class="masonary flex-cell"> <div class="featured-image-secondary inner-border-10"> <img src="some-image-url"> </div>
<div class="post-body-secondary cycle-colour-bg"> <p class="fw700 post-title-secondary void-colour">Some Title</p> <a href="Some-Link">Read More</a> </div> </article></div>
<div class="col-sm-4"> <article class="masonary flex-cell"> <div class="featured-image-secondary inner-border-10"> <img src="some-image-url"> </div>
<div class="post-body-secondary cycle-colour-bg"> <p class="fw700 post-title-secondary void-colour">Some Title</p> <a href="Some-Link">Read More</a> </div> </article></div>
<div class="col-sm-4"> <article class="masonary flex-cell"> <div class="featured-image-secondary inner-border-10"> <img src="some-image-url"> </div>
<div class="post-body-secondary cycle-colour-bg"> <p class="fw700 post-title-secondary void-colour">Some Title</p> <a href="Some-Link">Read More</a> </div> </article></div>
<div class="col-sm-4"> <article class="masonary flex-cell"> <div class="featured-image-secondary inner-border-10"> <img src="some-image-url"> </div>
<div class="post-body-secondary cycle-colour-bg"> <p class="fw700 post-title-secondary void-colour">Some Title</p> <a href="Some-Link">Read More</a> </div> </article></div>
<div class="col-sm-4"> <article class="masonary flex-cell"> <div class="featured-image-secondary inner-border-10"> <img src="some-image-url"> </div>
<div class="post-body-secondary cycle-colour-bg"> <p class="fw700 post-title-secondary void-colour">Some Title</p> <a href="Some-Link">Read More</a> </div> </article></div>
<div class="col-sm-4"> <article class="masonary flex-cell"> <div class="featured-image-secondary inner-border-10"> <img src="some-image-url"> </div>
<div class="post-body-secondary cycle-colour-bg"> <p class="fw700 post-title-secondary void-colour">Some Title</p> <a href="Some-Link">Read More</a> </div> </article></div>
<div class="col-sm-4"> <article class="masonary flex-cell"> <div class="featured-image-secondary inner-border-10"> <img src="some-image-url"> </div>
<div class="post-body-secondary cycle-colour-bg"> <p class="fw700 post-title-secondary void-colour">Some Title</p> <a href="Some-Link">Read More</a> </div> </article></div>
<div class="col-sm-4"> <article class="masonary flex-cell"> <div class="featured-image-secondary inner-border-10"> <img src="some-image-url"> </div>
<div class="post-body-secondary cycle-colour-bg"> <p class="fw700 post-title-secondary void-colour">Some Title</p> <a href="Some-Link">Read More</a> </div> </article></div>How to property create nth-child CSS for multiple level html
You are using nth-child in the wrong position try the below code, hope it will help you
.tbl .tblrow:nth-child(1) .decrement-z-index {
z-index: 200 !important;
}
.tbl .tblrow:nth-child(2) .decrement-z-index {
z-index: 199 !important;
}
.tbl .tblrow:nth-child(3) .decrement-z-index {
z-index: 198 !important;
}
.tbl .tblrow:nth-child(4) .decrement-z-index {
z-index: 197 !important;
}
Pseudo Class 'nth-child()' not working with ':hover
That's because the a isn't the 2nd child - it is an only child of it's parent li. What you are looking for is the a child of the 2nd li element. You can get that like this:
li:nth-child(2) a{ color: green; }
Then for the hover, either of these work with the code in your question. It depends on what you want to target with the hover:
// When the <a> in the second li is hovered, change it's colour
li:nth-child(2) a:hover{ color: green; }
/* OR */
/* When the second li is hovered, change the colour of the <a> it contains */
li:nth-child(2):hover a{ color: green; }
Working Example (using different colours to show it working):
ul {
background-color: white;
text-decoration: none;
padding: 0;
margin: 0 auto;
}
ul li {
margin: 0 2em;
display: inline-block;
padding: 0;
list-style: none;
}
ul li a {
text-decoration: none;
color: black;
}
/* change colour of 2nd link */
li:nth-child(2) a{
color: blue;
}
/* change colour of 2nd link on hover */
li:nth-child(2):hover a{
color: green;
}
/* change colour of 3rd link on hover */
li:nth-child(3) a:hover{
color: red;
}<ul>
<li><a href="#">Easy</a></li>
<li><a href="#">Medium</a></li>
<li><a href="#">Hard</a></li>
<li><a href="#">Insane</a></li>
</ul>Related Topics
How to Make Space Between Two Buttons in Same Div
How to Detect When Cancel Is Clicked on File Input
How to Remove Hover Effect from Bootstrap Button
Simple Way to Display Data in a .Txt File on a Webpage
Css - How to Make the Checkbox and Label in One Line
Multiple Span Tags Under a Div Add Extra Spaces
In Angular 4, How to Dynamically Set Min Date and Max Date in Date Picker
How to Avoid Decimal Values in Input Type Number
Show Placeholder Text for Input Type Date
How to Run a HTML File from Terminal
How to Manually Trigger Click Event in Reactjs
How to Resize Image in Bootstrap Carousel
How to Lock Viewport to Portrait Orientation in Html5/Css3