how to give a float left attribute to the second div following the h3 ?
<div class="view-content">
<h3>
<div>
<h3>
<div>
<h3>
<div>
<div> this one !
<h3>
<div>
</div>
You can chain adjacent sibling selectors:
h3 + div + div {
float: left;
background: yellow;
}
h3 + div {
display: inline-block;
}
<div class="view-content">
<h3></h3>
<div>not this</div>
<h3></h3>
<div>nor this</div>
<h3></h3>
<div>or this</div>
<div>but this one !</div>
<h3></h3>
<div>not this</div>
</div>
.view-content div:nth-of-type(2) //Mistaken
{
float:left;
}
it ll solve your problem. Thanks for pointing me the errors
Related
So, if this is the HTML of an element:
<div class="parent">
<div class="ignore-me">
<p class="child">ignore me</p>
<p class="child">ignore me</p>
<p class="child">ignore me</p>
<!-- I don't know how many <p> gonna be here -->
</div>
<p class="child">paint me green</p>
<p class="child">paint me blue</p>
</div>
How can I :
Select the children .child but not the ones inside the
div.ignore-me?
Select them separately, based on their index order.
I tried to use a mix of > and :nth-child(n) like this:
.parent > .child:nth-child(1)
But, it doesn't work!
Can this be done only CSS?
.parent > .child:nth-child(1) {
background: green;
}
.parent > .child:nth-child(2) {
background: blue;
}
<div class="parent">
<div class="ignore-me">
<p class="child">ignore me</p>
<p class="child">ignore me</p>
<p class="child">ignore me</p>
<!-- I don't know how many <p> gonna be here -->
</div>
<p class="child">paint me green</p>
<p class="child">paint me blue</p>
</div>
Use div.parent > p.p
> is the child combinator. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.
div.parent > p.p {
color:green;
}
<div class="parent">
<div class="ignore-me">
<p class="p">don't select me</p>
<p class="p">don't select me</p>
<p class="p">don't select me</p>
<!-- I don't know how many <p> gonna be here -->
</div>
<p class="p">select me</p>
<p class="p">select me too</p>
</div>
The accepted answer can be further simplified to div.parent > p, because > already only selects direct children.
div.parent > p {
color:green;
}
<div class="parent">
<div class="ignore-me">
<p>don't select me</p>
<p>don't select me</p>
<p>don't select me</p>
<!-- I don't know how many <p> gonna be here -->
</div>
<p>select me</p>
<p>select me too</p>
</div>
Regarding
Select them separately, based on their index order.
you can use :nth-child, but be aware that :nth-child also counts <div class="ignore-me"> as a child of <div class="parent">. So your first <p class="child"> is the second child. You can then use even and odd to alternate between the children.
div.parent > p {
color:green;
}
div.parent > p:nth-child(odd) {
color:blue;
}
<div class="parent">
<div class="ignore-me">
<p class="child">ignore me</p>
<p class="child">ignore me</p>
<!-- I don't know how many <p> gonna be here -->
</div>
<p class="child">paint me green</p>
<p class="child">paint me blue</p>
<p class="child">paint me green</p>
<p class="child">paint me blue</p>
</div>
Selecting direct nth p tag inside "parent" class
div.parent>p.child:nth-child(2) {
background: green;
}
div.parent>p.child:nth-child(3) {
background: blue;
}
div.parent>p.child:nth-child(4) {
background: green;
}
we can slect odd and event children
div.parent>p.child:nth-child(odd) {
background: green;
}
div.parent>p.child:nth-child(even) {
background: red;
}
This question already has answers here:
CSS selector for first element with class
(23 answers)
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 4 years ago.
I can not manage this situation:
<div class="list">
<div class="bar">
<header></header>
<div class="content"></div>
</div>
<div class="item">
<header></header>
<div class="content"></div> //select this
</div>
<div class="item">
<header></header>
<div class="content"></div>
</div>
</div>
CSS
.list > .item:first-child .content {
border-color: red;
}
I tried many solutions:
.list > .item:nth-of-type(1) .content { border-color: red; }
.list > div.item:first-child .content { border-color: red; }
.list .item:first-child .content { border-color: red; }
but no any result.
Quick note. The :nth-of-type selector selects only tags for now.
The :nth-of-type() CSS pseudo-class matches elements of a given type, based on their position among a group of siblings.
If I understand correctly, you are looking for this:
.list > div:nth-of-type(2) .content {
border: 1px solid;
border-color: red;
}
<div class="list">
<div class="bar">
<header>Head</header>
<div class="content">
Content 1
</div>
</div>
<div class="item">
<header>Head</header>
<div class="content">
Content 2
</div>
</div>
<div class="item">
<header>Head</header>
<div class="content">
Content 3
</div>
</div>
</div>
On a different note, you need to set the border-width and border-style to make sure the border is displayed.
I want to apply the first div color as red. other div as default.
I tried this but not working.
.community_team:first-child + div{
color:red;
}
Actual html below
<div class="community_team">
<h2>Managers</h2>
<div class="comm_team_item clearfix">
First Mangaer
<div>
<div class="comm_team_item clearfix">
2nd Mangaer
<div>
<div class="comm_team_item clearfix">
3rd Mangaer
<div>
</div>
Use the first-of-type pseudo selector. In the example below, this will match the first div element that is a child of .community_team.
Also your div elements aren't closed. Change <div> to </div> to close.
.community_team div:first-of-type {
color: red;
}
<div class="community_team">
<h2>Managers</h2>
<div class="comm_team_item clearfix">
First Mangaer
</div>
<div class="comm_team_item clearfix">
2nd Mangaer
</div>
<div class="comm_team_item clearfix">
3rd Mangaer
</div>
</div>
Also you can use the adjacent sibling combinator to target the first div after the h2 that is within .community-team. If there should ever be an instance where you may have a div prior to your h2 but you still want to target the first div after the h2.
.community_team h2 + div {
color: red;
}
<div class="community_team">
<div>This div is prior to the h2</div>
<h2>Managers</h2>
<div class="comm_team_item clearfix">
First Mangaer
</div>
<div class="comm_team_item clearfix">
2nd Mangaer
</div>
<div class="comm_team_item clearfix">
3rd Mangaer
</div>
</div>
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.
I need to select all headers but the first
<div class="block">
<div class="header">first</div>
</div>
<div class="block">
<div class="header">second</div>
</div>
<div class="block">
<div class="header">third</div>
</div>
<div class="block">
<div class="header">fourth</div>
</div>
Using jquery I would do this $(".header:not(:first)"), I'm however restricted to CSS/CSS3. I cannot tag the elements other than in my example.
Using .header:not(:first-child) wont do the trick
The .header elements are not siblings, therefore you should probably select all but the first .block element, then select the descendant .header from there:
.block:not(:first-child) .header {}
Depending on your markup, you may also want to negate the first of type if the element's types differ:
.block:not(:first-of-type) .header {}
.block:not(:first-child) .header {
color: #f00;
}
<div class="block">
<div class="header">first</div>
</div>
<div class="block">
<div class="header">second</div>
</div>
<div class="block">
<div class="header">third</div>
</div>
<div class="block">
<div class="header">fourth</div>
</div>
As David Thomas points out, you can also use the adjacent sibling combinator, + or the general sibling combinator, ~ in order to select all following siblings:
.block ~ .block .header {}
or:
.block + .block .header {}
.block + .block .header {
color: #f00;
}
<div class="block">
<div class="header">first</div>
</div>
<div class="block">
<div class="header">second</div>
</div>
<div class="block">
<div class="header">third</div>
</div>
<div class="block">
<div class="header">fourth</div>
</div>