I have this HTML:
<div class="row">
<div id="sidebar" class="column large-2 medium-3">
<div class="row">
test
</div>
</div>
<div id="rightside" class="column large-10 medium-9">
<div class="row">test2</div>
</div>
</div>
And this CSS:
#rightside:first-child{
border-bottom:solid 1px #main_color;
text-align:center;
}
#sidebar:first-child{
border-bottom:solid 1px #main_color;
text-align:center;
}
I'm using Zurb Foundation 5. The sidebar first-child works, but the one for the #rightside elements does not. Any idea why?
I've inspected the element #rightside and I can't see the CSS selector that I've applied in the inspector in Chrome. It seems that it doesn't recognize that selector for some reason.
I have nothing else in the CSS code, just this.
#rightside div:first-child
{
/* styles */
}
#sidebar div:first-child
{
/* styles */
}
This way you apply your styles to the first DIV inside of #rightside and #sidebar.
Because of comments: this will only work if your first-child is actually a div, if you want to style the first-child regardless of it's type you can use:
#sidebar :first-child
{
/* styles */
}
For #rightside:first-child to work, the div with ID rightside would need to be the first child of the parent, as the div with ID sidebar is.
Given that you're using IDs, the div with ID rightside should be the only one in your HTML so the selector you'd use would be simply #rightside.
You need this https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type
This targets the first type of a particular element, in your case it is a div
#rightside div:first-of-type {
background-color: red;
}
http://jsfiddle.net/w0wprkb0/
Related
This is my code:
.fontmenu .fontlist{
position: absolute;
bottom:30px;
display:none;
}
.fontbutton button:hover .fontmenu .fontlist{
display:block;
}
<div class="fontmenu">
<div class="fontbutton">
<button>fonts</button>
</div>
<div class="fontlist">
<div onclick="font(1)">Arial</div>
<div onclick="font(2)">Courier</div>
<div onclick="font(3)">Verdana</div>
<div onclick="font(4)">sans</div>
</div>
</div>
The CSS is not working. The list is not visible when I hover the button. I want to know whether the .fontbutton button:hover .fontmenu .fontlist{} is valid or not.
This is what you have used:
.fontbutton button:hover .fontmenu .fontlist{ }
This won't work
Why it won't work? Read on. I will explain. But first, lets see what will work.
Lets try using some selectors:
.fontbutton:hover + .fontlist {}
This WILL work
Let's see it in action:
.fontmenu .fontlist {
bottom: 30px;
display: none;
}
.fontbutton:hover + .fontlist {
display: block;
}
/* No need to include the wrapper fontmenu div,
just target the siblings, ie, fontbutton and fontlist.
The + selector must be used, otherwise, the browser will
think fontlist is the child of fontbutton */
<div class="fontmenu">
<div class="fontbutton">
<button>fonts</button>
</div>
<div class="fontlist">
<div onclick="font(1)">Arial</div>
<div onclick="font(2)">Courier</div>
<div onclick="font(3)">Verdana</div>
<div onclick="font(4)">sans</div>
</div>
</div>
Notice that the list becomes visible even if we hover to the right of the button. This is happening since we are targeting the div fontbutton and not the <button> element. So, the browser makes the list visible when we hover the div and not the button.
How to fix?
We need to change the html a little.
.fontmenu .fontlist {
display: none;
}
button:hover + .fontlist {
display: block;
}
<div class="fontmenu">
<button>fonts</button>
<div class="fontlist">
<div onclick="font(1)">Arial</div>
<div onclick="font(2)">Courier</div>
<div onclick="font(3)">Verdana</div>
<div onclick="font(4)">sans</div>
</div>
</div>
Look that I removed the .fontbutton class and made the <button> a sibling of .fontlist. So, now, you can see that the list is visible only when we hover the button.
Now you would say I could just add some selectors to your css. But I didn't because there's no way you could target <button> and then move down to .fontlist which is in a separate div.
.fontbutton > button:hover ? .fontmenu > .fontlist{ }
We will have a problem at the place of ?.
First, we need to go down to .button.
Move up to .fontbutton.
Add a + selector and switch to .fontmenu.
Move down to .fontlist.
After we move down to .button, we can't go up again to .fontbutton.
CSS doesn't have something like parent selector.
So, clearly, we can't use it that way.
I have a responsive page with two sections. All elements in right section should be responsive so I used :
#rightSection * {max-width:100%;height:auto}
however any further height styles are being ignored as you see in the code snippet.
I don't want to use !important because I have many inline styles with html codes so I prefer not forcing the styles through CSS. Is there any other way to set heights after height:auto?
#rightSection * {max-width:100%;height:auto}
.mydiv {
width:534px;
height:37px;
box-sizing:border-box;
}
<div id="rightSection">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is invisible because the height is igonred!
According to your code whatever is happening is fine CSS means Cascading Style sheet that means the last rule applies and that to whichever is more specific. So in your case the first rule has higher specifity than the second rule so height:auto is being applied.
Refer link for more details on Specificity.
So in you code you can make the second role morre specific by different ways which you will come to know from the above link. Below is one such example.
#rightSection * {max-width:100%;height:auto}
#rightSection div {
width:534px;
height:37px;
box-sizing:border-box;
}
<div id="rightSection">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is invisible because the height is igonred!
Edit:
As pointed out by #connexo i would suggest not use Id selectors refer this for more details on why.
You can use css classes instead as classes help to make your code more general for example
.outerDiv * {max-width:100%;height:auto}
.outerDiv .mydiv{
width:534px;
height:37px;
box-sizing:border-box;
}
<div class="outerDiv">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is visible now as the rule is more specific.
Hope it helps :)
#rightSection * {max-width:100%;height:auto}
#rightSection .mydiv {
width:534px;
height:37px;
box-sizing:border-box;
}
<div id="rightSection">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is invisible because the height is igonred!
I want to apply some CSS to the last blog-post. The problem is that the last element in the div 'blog-posts' is the same type of element as the 'blog-post' divs.
I've tried:
last-of-type
last-child
HTML:
<div class="blog-posts">
<div class="blog-post"></div>
<div class="blog-post"></div>
<div class="blog-post"></div>
<div class="blog-post"></div>
<div class="f03-456245"></div>
</div>
CSS:
.blog-post:last-child{
//do some css
}
Last element using .class is not possible. In your case you can use nth-last-child property.
.blog-posts div:nth-last-child(2) {
background: #ff0000;
}
DEMO
You may have to do like this:
.blog-posts div:last-child{
//do some css
}
It is assuming div is the element. It applies for anyother element type p , span etc...
I have an issue with hover
I have 3 child div's like:
<div class="parent">
<div class="child1">A</div>
<div class="child2">B</div>
<div class="child3">C</div>
</div>
I had applied hover on parant div to change color on child1 and child2 div.
Yet hover is applied over child3 div too....
Is there a way to exclude hover on child3 alone??
Any help is appreciated. Thanks in advance.
div.parent:hover {
color: #909090;
}
In the the above example there has to be no change of color on font "C" though it is present inside parant div.
Just make your CSS more specific:
.parent:hover .child1, .parent:hover .child2 {
color:#909090;
}
div.parent:hover {
color:#909090;
}
Your CSS is saying "select DIV tags with class parent and apply the following CSS only on hover state, then change font color to #909090".
First, if you want hover state on the child, do this:
/* explanation: select DIV tags with "child" class on hover state */
div.parent div:hover {
/* apply your CSS here */
}
If you want to make specific CSS for some tags and exclude it from other tags, be more specific. You can add more than 1 class to any tag. For example, let's add another class for child1 and child2 for special hover state, and exclude it for child3:
<div class="parent">
<div class="child1 myHoverClass"></div>
<div class="child2 myHoverClass"></div>
<div class="child3"></div>
</div>
Now it's easy to control that with CSS:
/* explanation: find parent class div, then select children DIV tags with class name "myHoverClass" and apply CSS for hover state only.. in this case, only child1 and child2 DIV tags */
div.parent div.myHoverClass:hover {
/* apply your CSS here */
}
Note: watch out for spaces in CSS, they are very sensitive and it could completely mean something else without cautious use.
You can try adding the style
.child3
{
color : #000;
}
DEMO
.child1:hover, .child2:hover {
color:#909090;
}
FIDDLE DEMO
div.parent:hover > :not(.child3) {
color:#909090;
}
div.parent:hover .child1,div.parent:hover .child2{
color: #909090;
}
add a different class to child1 and child2 like this may be:
<div class="parent">
<div class="test child1"></div>
<div class="test child2"></div>
<div class="child3"></div>
</div>
.test:hover{background-color:red;}
I'm trying to set the background color of the first div with the class offer. I thought .offer:first-child would do the trick, but that isn't working.
I've also tried using :nth-child(1), but that's not working either.
Any suggestions is greatly appreciated.
My fiddle: http://jsfiddle.net/MNQar/
CSS
.offer:first-child { background-color: indianred; }
.special-offers .title,
.special-offers .offer,
.special-offers .more {
height: 200px;
}
[class*="column"] {
display: inline;
float: left;
margin: 0;
}
.column2 { width: 190px;}
.column3 { width: 285px;}
HTML
<div class="row row-spacer special-offers">
<div class="column2 title">
<h2>Offers</h2>
</div>
<div class="column3 offer padding">
<div class="date">10. June</div>
<h3>Høyer tømmer lageret!</h3>
</div>
<div class="column3 offer padding">
<div class="date">10. June</div>
<h3>Super salg hos Vivikes</h3>
</div>
<div class="column1 more">
<div class="caret"></div>
More offers
</div>
</div>
.offer:first-child means "An element With the class 'offer' that is the first child beneath its parent", not "the first child with class 'offer'".
I believe you have to re-think how you do this. For example, stick a separate class to the first child or something, then use a selector like .offer.highlight.
CSS Only
This should work:
.offer { background-color: #ccc; }
.offer ~ .offer {background-color: transparent; }
It first sets all .offer elements to have a background color, then uses the sibling selector (~) to undo it for all subsequent .offer elements. Kind of a hack but it should be okay if you're not willing to use javascript. See here for a much more complete explanation: CSS selector for first element with class
And here's a fiddle: http://jsfiddle.net/MNQar/4/
JS
Alternatively, this is really easy to do with Javascript: $(".offer").eq(0).css("background-color","#ccc");
Fiddle: http://jsfiddle.net/MNQar/6/
The problem is that there is a div that precedes the first offer, making it the second element, not the first. The best solution is to give the first offer a different class, offer-first and use that. If that's not possible and the first offer is always the second child, you can use :nth-child(2)
Using :nth-child(2)
http://jsfiddle.net/MNQar/3/