I am trying to target all top level .dokan-form-group elements with nth-child.
As you can see, there is a wrapper in the middle called dokan-child-wrapper which has some dokan-form-group elements inside.
I don't want to target these. Only the upper most top level classes which match dokan-form-group, which is a direct descendant of .wrapper.
You can see it's targeting 4 items, but the 3rd and 4th are targeting the child elements which I don't want.
Code example:
https://codepen.io/jordanc26/pen/NWKOXKQ
HTML / SCSS Code:
<div class="wrapper">
<div class="dokan-form-group">parent-item</div>
<div class="dokan-form-group">parent-item</div>
<div class="dokan-child-wrapper">
<div class="dokan-form-group">child-item</div>
<div class="dokan-form-group">child-item</div>
<div class="dokan-form-group">child-item</div>
</div>
<div class="dokan-form-group">parent-item</div>
<div class="dokan-form-group">parent-item</div>
</div>
.
.wrapper {
.dokan-form-group {
background-color: blue;
&:nth-child(0),
&:nth-child(1),
&:nth-child(2),
&:nth-child(3) {
background-color: red;
}
}
}
Change scss to:
.wrapper {
>.dokan-form-group {
background-color: blue;
&:nth-child(1),
&:nth-child(2),
&:nth-child(3),
&:nth-child(4) {
background-color: red;
}
}
}
live demo
Related
lets say i have this html:
<div class="wrapper">
<p>testOne</p>
<p>testTwo</p>
<p>testThree</p>
</div>
If i want to apply to the p tag design, i can go to CSS and use:
1)
.wrapper > * {
color: red;
}
OR
2)
.wrapper {
color: red;
}
Both of them work just fine, so, what is the difference?
I have heard once that the the first example apply the design only to the direct childs of the "wrapper", so then i did:
<div class="wrapper">
<p>testOne</p>
<div class="container">
<p>testTwo</p>
</div>
<p>testThree</p>
</div>
so testTwo is not a direct child..but he still got the color red!
so testTwo is not a direct child..but he still got the color red!
testTwo's parent <div class="container"> has the color red, though, so all of its children inherit that style. It's the same fundamental behavior as setting your body color to red and that reflecting on the whole document.
I have heard once that the the first example apply the design only to the direct childs of the "wrapper"
That's right.
Maybe border will better illustrate the difference between the selectors, since children don't inherit it:
.wrapper > * {
border: 1px solid red;
}
.wrapper {
border: 1px solid blue;
}
<div class="wrapper">
<p>testOne</p>
<div class="container">
<p>testTwoA</p>
<p>testTwoB</p>
</div>
<p>testThree</p>
</div>
Although you didn't ask about it, for context consider also .wrapper *, which selects all children regardless of depth, further illustrating >:
.wrapper * {
border: 1px solid green;
}
.wrapper > * {
border: 1px solid red;
}
.wrapper {
border: 1px solid blue;
}
<div class="wrapper">
<p>testOne</p>
<div class="container">
<p>testTwoA</p>
<p>testTwoB</p>
</div>
<p>testThree</p>
</div>
Note that order matters in the above example since .wrapper * and .wrapper > * are no longer disjoint as .wrapper and .wrapper > * are.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have been trying to do this for a while and feel it should be fairly simple:
<div id = "container">
<div id = "item1" class = "item"> </div>
<div id = "item2" class = "item"> </div>
<div id = "item3" class = "item"> </div>
</div>
How can I select each item one after another and assign each a different background (without using ids)?
What I am trying to achieve:
#item1 {
background: red;
}
#item2 {
background: blue;
}
#item3 {
background: yellow;
}
<div id="container">
<div id="item1" class="item"> </div>
<div id="item2" class="item"> </div>
<div id="item3" class="item"> </div>
</div>
But isn't there a way to select each element in the #container div one by one, regardless of it's id value? By doing something such as the following :
.container:nth-child(1){ /*select first child of .conainter (#item1) ?*/
background: red;
}
or
.item:nth-of-type(2){ /*select second element of type .item (#item2) */
background: blue;
}
If you are trying to do this with only CSS:
.item:nth-of-type(1) { background: #fff}
.item:nth-of-type(2) { background: #000}
.item:nth-of-type(3) { background: #abc}
If you want to grab these after the fact using JS and/or jQuery:
jQuery(".item").each(function(i, el) {
if(i == 0) {
el.style.backgroundColor = "black";
} else {
el.style.backgroundColor = "red";
}
})
i here would be the index of your .item elements so you can target which one you need by this index (hence the conditional)
Also note that you need to set a height on the .item elements or add some content if you want to see the background color change. The height by default is 0
There are several ways to achieve this in CSS and JS. Below, is my variation I would normally use on client websites to achieve this background variation you are attempting to achieve:
#container div {width: 200px; height: 200px;}
#container div:first-child {background-color: red;}
#container div:nth-child(2) {background-color: green;}
#container div:last-child {background-color: blue;}
Im using first child and last childs on the first and last elements inside #container and then for the one in the middle i just tell the browser to find the second div inside #container.
Here is my HTML so my explination and CSS makes sense:
<div id = "container">
<div>ITS RED! </div>
<div>ITS GREEN! </div>
<div>ITS BLUE! </div>
</div>
Feel free to edit and play around with my code in a jsfiddle enviroment: https://jsfiddle.net/x9eouw7z/
For a static page you can use the :nth-child() selector like this:
https://jsfiddle.net/DIRTY_SMITH/6brcg9p7/3/
.item:nth-child(1) {
background: blue;
}
.item:nth-child(2) {
background: red;
}
.item:nth-child(3) {
background: green;
}
This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 6 years ago.
I'm trying to style a certain <div> in my markup with CSS/SASS, and I'm clueless as to why it's not applying the rules. This is my markup:
<div class="row addon-header">
<div class="col-sm-3">
// something here
</div>
<div class="col-sm-9">
<h2>Title</h2>
<h6><em>Slogan</em></h6>
<div class="col-xs-1">
// I want to access this
</div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
</div>
</div>
And this is the SASS I'm trying to use for it:
div.addon-header {
color: white;
> div.col-sm-9 > div.col-xs-1:first-child {
background-color: black;
padding-left: 0px !important;
}
}
If I remove the :first-child selector in my SASS, it's working, but obvious for every <div class="col-xs-1"> not just the first one, which is not what I want.
I also tried playing around and doing something like
div.addon-header {
color: white;
> div.col-sm-9 > div.col-xs-1 {
&:first-child {
background-color: black;
padding-left: 0px !important;
}
}
}
or
div.addon-header {
color: white;
> div.col-sm-9 {
> div.col-xs-1:first-child {
background-color: black;
padding-left: 0px !important;
}
}
}
or using :nth-child(1) instead. Nothing works. I'm clueless. Somewhere else in my SASS, I have the following:
.tab-content {
>.tab-pane:first-child > form > div.row > div {
// rules here
> div.picture-container {
// rules here
}
}
>.tab-pane {
// rules here
}
>.tab-pane:nth-child(4) > form {
// rules here
}
}
Which is working just fine. So I really don't get what I'm doing wrong in the first example. Anyone able to help?
You need the :nth-of-type() (or, in your case, the :first-of-type selector).
In the example your provided the :first-child of .col-sm-9 element is the h2.
div.addon-header {
color: white;
> div.col-sm-9 > div.col-xs-1:first-of-type {
background-color: black;
padding-left: 0px !important;
}
}
Note, though, that the :nth-of-type() selectors, like the :nth-child() selectors, apply to tags only, not class names; if you were to insert another div before the first .col-xs-1 then this would no longer work.
col-xs-1 need to wrap row because this block is not first element. First element is h2
How to select only first two children of a parent (not every first and every second child). In a .scss mixin using nth:child selector?
Here is my code and it doesn't work because it selects every second div. But I need to select only col_l as a :nth-child(1) and col_r as a :nth-child(2).
html:
<section id="section" class="clearfix">
<div class="col_l"> <!-- this is div:nth-child(1) -->
<div class="title">
Left col
</div>
<div></div>
<div></div> <!-- this div is also selected as a :nth-child(2), but it is wrong -->
</div>
<div class="col_r"> <!-- this is div:nth-child(2) -->
<div class="title">
Right Col
</div>
</div>
</section>
.scss:
#mixin two-col($width-left, $width-right) {
#include clearfix;
div:nth-child(1) {
float: left;
width: $width-left;
}
div:nth-child(2) {
float: right;
width: $width-right;
}
}
#section {
#include two-col(714px, 237px);
background-color: #749675;
.col_l { }
.col-r { }
}
How to select only the first and only the second divs? Not every.
You need to add the child combinator > to the selectors in your mixin to ensure you actually select just the children of #section and not any further descendants:
#mixin two-col($width-left, $width-right) {
#include clearfix;
> div:nth-child(1) {
float: left;
width: $width-left;
}
> div:nth-child(2) {
float: right;
width: $width-right;
}
}
Short question: Why does the background-color of .b does not change when I hover? .a?
CSS
.a {
color: red;
}
.b {
color: orange;
}
.a:hover .b {
background-color: blue;
}
HTML
<div id="wrap">
<div class="a">AAAA</div>
<div class ="b">BBBB</div>
</div>
http://jsfiddle.net/2NEgt/
You need to have .a:hover + .b instead of .a:hover .b
.a:hover .b would work for a structure like
<div class="a">AAAA
<div class ="b">BBBB</div>
</div>
If at some point you'll need to have some elements between .a and .b, then you'll need to use .a:hover ~ .b, which works for all siblings of .a coming after it, not just the next one.
Demo http://jsfiddle.net/thebabydino/EajKf/
Can you not do something like a:hover + b? see http://meyerweb.com/eric/articles/webrev/200007a.html
You can use + selector
.a:hover + .b {
background-color: blue;
}
to apply the css for sibling element, or
.a:hover > .b {
background-color: blue;
}
for nested class.
because .b isn't a child of .a, so that selector isn't finding anything. Use javascript to do what you want to do there.
There are two things you can do.
Either change your HTML to make .b a child of .a
<div id="wrap">
<div class="a">AAAA
<div class ="b">BBBB</div>
</div>
</div>
OR
Change your css to use the adjacent selector
.a:hover + .b {
background-color: blue;
}
no js needed http://jsfiddle.net/2NEgt/3/
You shouldn't change a sibling's style when an event occurs on a different element. It's out of the context of CSS.
Use JavaScript to achieve this, for example:
var wrap = document.getElementById("wrap");
var aDiv = wrap.getElementsByClassName("a")[0];
var bDiv = wrap.getElementsByClassName("b")[0];
aDiv.onmouseover = function() {
bDiv.style.backgroundColor = "red";
};
aDiv.onmouseout = function() {
bDiv.style.backgroundColor = "white";
};
try to understanding this example:
html code
<p>Hover over 1 and 3 gets styled.</p>
<div id="one" class="box">1</div>
<div id="two" class="box">2</div>
<div id="three" class="box">3</div>
<!--css-->
#one:hover ~ #three{
background-color: black;
color: white;
}
.box {
cursor: pointer;
display: inline-block;
height: 30px;
line-height: 30px;
margin: 5px;
outline: 1px solid black;
text-align: center;
width: 30px;
}
when you hover on the box 1 than the box 3 will get black color
Jquery is a good and easy solution:
html:
<div class="a">AAA</div>
<div class="b">BBB</div>
script:
Put this script into your html if you want. That's all.
<script>
$(".a").mouseover(function(){
$(".b").css("color", "blue");
});
$(".a").mouseleave(function(){
$(".b").css("color", "red");
});
</script>