selector for nth nested elements
In CSS the selector string is largely describing the nesting structure, and there does not currently exist any generational skipping selectors such that you might theoretically do something like .item:nth-grandchild(4)
to replace your fifth example.
If reducing verbosity of your css is of high importance to you (lets say you have up 10 or even 100 levels of nesting you are switching on), then really you need to look into modifying the html itself in order to reduce the css needed. That can be done dynamically via server-side scripting (PHP, etc.), or client-side scripting (Javascript), or statically by you. Which way you choose will depend on a variety of factors.
The html modification can be in the form of more specific classes or direct style properties, but I recommend the former. Here are at least four ways css would be reduced:
#1 Multiple Classes, One Indicating Level
Sample HTML
<div class="item L-1">
<div class="item L-2">
<div class="item L-3">
</div>
</div>
</div>
Sample CSS
.item.L-1 {
border-left-color: #somecolor1;
}
.item.L-2 {
border-left-color: #somecolor2;
}
.item.L-3 {
border-left-color: #somecolor3;
}
#2 Multiple Classes, One Indicating Color
Sample HTML
<div class="item LBC-1">
<div class="item LBC-2">
<div class="item LBC-3">
</div>
</div>
</div>
Sample CSS
.item.LBC-1 {
border-left-color: #somecolor1;
}
.item.LBC-2 {
border-left-color: #somecolor2;
}
.item.LBC-3 {
border-left-color: #somecolor3;
}
#3 Single Class Name Indicating Level
Sample HTML
<div class="item-L1">
<div class="item-L2">
<div class="item-L3">
</div>
</div>
</div>
Sample CSS
[class *= "item-"] {
/* common css properties for the items goes here */
}
.item-L1 {
border-left-color: #somecolor1;
}
.item-L2 {
border-left-color: #somecolor2;
}
.item-L3 {
border-left-color: #somecolor3;
}
#4 Style Properties for Each Item
Sample HTML
<div class="item" style="border-left-color: #somecolor1">
<div class="item" style="border-left-color: #somecolor2">
<div class="item" style="border-left-color: #somecolor3">
</div>
</div>
</div>
Sample CSS
/* none to control color */
Discussion of "Best"
Often dynamic solutions end up producing html like that of #4, which ends up making the html very verbose, and I personally would not recommend it. However, those dynamic solutions do not need to do that, but could instead add class names like #1-3.
What is ultimately "best" depends a lot on what you are trying to achieve, how much control you have, and what other properties need changing as well. Personally, I would avoid #2 as well, because it begins to tie presentation too much to html by having a class name associated with the "left border color." To me, solution #1 or #3 would be best, as those are simply setting classes that help the css to know what "level" the .item
is at, which then allows for specific targeting to that level for anything you may need it for.
Of course, if you were really dealing with 100 nested levels, then even for solutions #1-3, you might want to look into some css preprocessor to generate the 100 levels of code needed. But the css output would still be far less than the long selector strings needed using the current method you are doing.
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;
}
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;
}
:nth-child For Nested Elements
Here you go, should be okay from what I understood you are trying to achieve. If work should be done on li's inside item-menu
use an approach from comments! Hope it matched your goal.
</style>
</head>
<body>
<nav class='amazing-menu '>
<ul id='menu_container'>
<li class="parent">
<a href="#" class="link">First</a>
<div class="sub-menu">
<ul class="menu-item">
<!-- I want to => background-color: red; -->
<li>
<a href="" class="link">sub-item1</a>
</li>
<li class="parent">
<a href="" class="link">sub-item1</a>
<div class="sub-menu">
<ul class="menu-item">
<!-- I want to => background-color: blue; -->
<li><a href="link">sub-sub-item1</a>
</li>
<li><a href="link">sub-sub-item2</a>
</li>
<li><a href="link">sub-sub-item3</a>
</li>
<li class="parent"><a href="link">sub-sub-item4</a>
<div class="sub-menu">
<ul class="menu-item">
<!-- I want to => background-color: green; AND so on ... -->
<li><a href="link">sub-sub-sub-item1</a>
</li>
<li><a href="link">sub-sub-sub-item2</a>
</li>
<li><a href="link">sub-sub-sub-item3</a>
</li>
<li><a href="link">sub-sub-sub-item4</a>
</li>
</ul>
</div>
</li>
<li><a href="link">sub-sub-item2</a>
</li>
<li><a href="link">sub-sub-item3</a>
</li>
</ul>
</div>
</li>
<li>
<a href="" class="link">sub-item2</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementsByClassName("sub-menu");
for(var i = 0; i<x.length; i++)
{
if(i%2==0)
{
document.getElementsByClassName("menu-item")[i].style.backgroundColor = "red";
}
else
{
document.getElementsByClassName("menu-item")[i].style.backgroundColor = "blue";
}
}
}
</script>
</body>
</html>
P.S. I put a picture here that you can see whether is match your requirements!
https://s27.postimg.org/ta75cv36r/image.png
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
How to Add Custom Icon in Twitter Bootstrap
Differencebetween Push and Offset Under the Grid System
Is There a CSS Way to Add an Arrow If a Ul Has a Ul Child
Css3 Selector to Find the 2Nd Div of the Same Class
How to Apply CSS3 Transition to All Properties Except Background-Position
How to Make Visual Studio Stop "Compiling" .Js and .CSS Files
CSS - Vertical Line Between Bullets in an Unordered List
Overflow:Hidden Ignored with Border-Radius and CSS Transforms (Webkit Only)
CSS Multi-Column Layout of List Items Doesn't Align Properly in Chrome
Css: on Hover Show and Hide Different Div's at the Same Time
In What Circumstances Is Flex-Shrink Applied to Flex Elements and How Does It Work
Bootstrap Carousel Resizing Image
CSS Underline Less Than Width of Headline
How to Vertically Align Floating Divs to the Bottom
How to Remove the Underline of Textfield from Material-Ui
Why Does Bootstrap 3 Force the Container Width to Certain Sizes