How Can I select the first child element in this case below :
<div class="root">
<div class="child">1</div> <---- i want this element
</div>
<div class="root">
<div class="child">2</div>
</div>
<div class="root">
<div class="child">3</div>
</div>
i try the css below but i select all child elements
.child:first-child {
...
}
If you want this just to affect the first root then you would also add a first-of-type to root
.root:first-of-type > .child:first-of-type {
...
}
Related
I can change child on parent hover like this:
.parent:hover .child{ ... }
Problem is, that this will change all childs in document.
(I'm using parent 10x on the page => it will change childs in all these parent)
Is there a CSS way, how to change only child of the parent, that I'm currently hovering over?
Example:
<div class="parent">
<p class="child"></p>
</div>
<div class="parent">
<p class="child"></p>
</div>
<div class="parent">
<p class="child"></p>
</div>
If I hover over first .parent, I want change on its .child. But my mentioned solution will affect all childs.
You'll want to directly select the child using the ">" or the "adjacent sibling combinator"
.parent:hover > .child{
background: red;
}
<div class="parent">
<p class="child">child one</p>
</div>
<div class="parent">
<p class="child">child two</p>
</div>
<div class="parent">
<p class="child">child three</p>
</div>
trying to target just the first .row but i seem to be targeting all rows. Why isn't first-child working? Here's my code:
<footer class="f1">
<div class="container">
<div class="row">
<div class="col-md-5">
<img src="/images/logo_footer.png" alt=""/>
</div>
<div class="col-md-7"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-5">
<img src="/images/logo_footer.png" alt=""/>
</div>
<div class="col-md-7">
</div>
</div>
</div>
</footer>
CSS
.f1 .container .row:first-child {
padding-top:42px;
position:relative;
}
The pseudo selector :first-child is targeting the first child of each thing that matches the selector: .f1 .container .row. Since you have two instances of containers and each with a row as a child, the selector is affecting the first child of each. If you want only the row of the first container to be affected, you need to specify the first container as well. Ex: .f1 .container:first-child .row
Use the below css selector it should be affecting for all rows.
.f1 .container .row {
padding-top:42px;
position:relative;
}.
It should work.
If i use "nth-of-type(1)" selector, its select all of them. How can i select only parent div ?
Thanks
<div class="parent_div">
<div class="parent_div"></div>
<div class="parent_div"></div>
<div class="parent_div"></div>
</div>
You should include directive parent container into your selector and use direct child selector >:
.container > .parent_div:nth-of-type(1) {
border: 1px red solid;
}
<div class="container">
<div class="parent_div">
<div class="parent_div"></div>
<div class="parent_div"></div>
<div class="parent_div"></div>
</div>
</div>
I am trying to apply a style to a div based on its parent class. I am using the :not() selector to select the div whose parent is not .container1, the second div should be red, but it's not working.
Example 1
.myDiv:not(.container1) > .myDiv {
color: red;
}
<div class="container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container2">
<div class="myDiv">Div 2</div>
</div>
Example 2
.myDiv:not(.container1 .myDiv) {
color: red;
}
<div class="container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container2">
<div class="myDiv">Div 2</div>
</div>
Is this even possible with CSS? Or is my syntax just off?
You're selecting wrong elements. No reverse lookups possible, see here:
div:not(.container1) > .myDiv {
color: red;
}
<div class="container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container2">
<div class="myDiv">Div 2</div>
</div>
Ideally, you'd group those parent divs under the same class in order to avoid the super-generic div selector:
.container:not(.container1) > .myDiv {
color: red;
}
<div class="container container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container container2">
<div class="myDiv">Div 2</div>
</div>
CSS can't do "parent lookups" like that. You would need to reverse the structure to something like:
.my-container:not(.container1) .myDiv
Granted, you would need to add the shared my-container class to all "parent" divs of interest.
Without adding any classes (or touching the HTML) is there a way to target the first element inside a div ONLY if there is a second element in that div? Below is my HTML:
<div class="grid">
<div class="content">I WANT TO APPLY CSS TO THIS</div>
<div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>
<div class="grid">
<div class="content">Don't apply here</div>
</div>
<div class="grid">
<div class="content">Don't apply here</div>
</div>
<div class="grid">
<div class="content">I WANT TO APPLY CSS TO THIS</div>
<div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>
A few context to this for a better picture ... I want to center the .content if it's the only .content inside .grid. But if there are two .content divs, then I want them to float next to each other.
Note:
I already know I can target the second .content by
.grid .content:nth-child(2) { ... }
.grid > .content:first-child:not(:only-child) {
color: blue;
}
<div class="grid">
<div class="content">I WANT TO APPLY CSS TO THIS</div>
<div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>
<div class="grid">
<div class="content">Don't apply here</div>
</div>
<div class="grid">
<div class="content">Don't apply here</div>
</div>
<div class="grid">
<div class="content">I WANT TO APPLY CSS TO THIS</div>
<div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>
:first-child:not(:only-child) would be your selector.