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>
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.
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 am trying to select every other div with a class name. the issue is there are all in different parent div's. I've tried many things with sibling selection but have not yet found a solution. This is what I am looking for:
Add a margin of 30px to ever even div with the class name article
<div class="wrapper">
<div class="section">
<div class="article"><!--No Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--Add Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--No Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--Add Margin here-->
</div>
</div>
</div>
I tried something like this but did not work:
.section > .article:nth-child(even){
margin-right: 30px;
}
Rather than select the even/odd .article elements, you need to select the even/odd .section elements.
.section:nth-child(even) > .article
{
/* Your css here */
}
Fiddle: http://jsfiddle.net/jakelauer/4PMbS/
<div class='container'>
<div class='item'>
<div class='date'>
<a></a>
</div>
<div class='work'>
<a></a>
</div>
<div class='info'>
<a>$row[info]</a>
</div>
</div>
<div id="footer">
</div>
</div>
I have border-bottom for class info:
.info {padding-bottom: 10px; border-bottom: 1px dashed #C8C8C8;}
But I dont want border for last child but it is not working. All borders disappears.
.info:last-child {border-bottom: none;}
Why is that? And what is the best solution?
I am not sure what you're trying to achieve? Your trying to apply :last-child when you've only got one child to target, therefore it will not appear.
It would work if there were more than one .info
See here: http://jsfiddle.net/ELk4E/ - In the fiddle I've replicated div.info three times, and the 3rd and last has the border-bottom removed via the :last-child
However, if you have div.info on your page several times but within different parents, this will not work. Such as:
<div class='container'> <!-- parent 1 -->
<div class='item'>
<div class='date'>
<a></a>
</div>
<div class='work'>
<a></a>
</div>
<div class='info'>
<a>Last Child</a>
</div>
</div>
<div id="footer">
</div>
</div>
<div class='container'><!-- parent 2 -->
<div class='item'>
<div class='date'>
<a></a>
</div>
<div class='work'>
<a></a>
</div>
<div class='info'>
<a>Last Child</a>
</div>
</div>
<div id="footer">
</div>
</div>
In this example you could use the following CSS to remove the border-bottom of the last container's div.info:
.info {padding-bottom: 10px; border-bottom: 1px dashed #C8C8C8;}
.container:last-of-type .info {border-bottom: none;}
Basically the :last-child selector matches every element that is the last child of its parent. See here: http://www.w3schools.com/cssref/sel_last-child.asp
Try this one
.info:last-child {border-bottom: none; !important}