How do I delete the background of my last DIV using class="item"?
Parent is: <div id="lastQuestions"></div>
jsfiddle
.item:last-child {
background-color: inherit;
}
Use pseudo element last-child
Here is a working jsfiddle
Alternatively, you could use a different html tag (like span, p or li displayed as block) for the.item elements instead of div to differentiate them from other div elements, and then you can do something like:
#lastQuestions li:last-of-type {
background: none;
}
to select it.
quick illustration
Edit:
Since, according to your jsfiddle, only .item elements are of type div in your code they already differ in type from all other children of #lastQuestions. So you can just try this:
#lastQuestions > div:last-of-type {
background: none;
}
DEMO
Related
I would like to hover a link (<a> tag which contains a <div> tag), so the color becomes red BUT only when I hover the yellow field! My problem is that you can also hover it if the cursor is not on the yellow field.
I know that I could put the a tag into the div tag but I want to link the whole box and not only the text.
I also tried to use a { width: 100px; } but that is of course not working.
https://jsfiddle.net/3phy4950/
Any ideas how I can resolve this?
It does not work with width, because you are applying this style to the a tag. But a tags are display inline by default which means they dont take the whole space / line.
The div tag is display block by default, which means it will take the whole space / line.
What you need is to change the display style from the a div to inline:
a div {
display: inline;
}
See Fiddle
Use inline-block as the display format for the <a> tag.
a {
width: 100px;
display: inline-block;
}
Your updated fiddle
What about this:
<div class="btn" onclick="location.href='http://google.com'">» Hover Me</div>
And the css:
.btn {
background-color: yellow;
width: 100px;
}
.btn:hover {
color: red;
}
I have applied background-color: #C0C0C0; to my span element .grey_bg but the background is not changing color. Why is that?
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<span class="grey_bg">
<h1>Hey</h1>
</span>
Because it's not really valid HTML to put block-level H1 element inside span (inline element). You can either use div instead of span
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<div class="grey_bg">
<h1>Hey</h1>
</div>
... or make span block-level too:
span {display: block;}
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<span class="grey_bg">
<h1>Hey</h1>
</span>
First your markup is not correct. You can't have a block element, h3, inside an inline element, span.
But in case you want to keep that markup, you have to make the container element to behave as block. So make it as:
.grey_bg {
width: 100%;
background-color: #C0C0C0;
display:block;
}
Your code is incorrect because your span is wrapping your H tag.
You should not use span to wrap inline element's like H tag's. Instead you want the span to be inside your H tag.
The span element is the inline level generic container. It also helps to inform the structure of document, but it is used to group or wrap other inline elements and/or text, rather than block level elements.
The line between the two different types might seem fairly arbitrary at first. The difference to bear in mind is the type of content, and how it would appear when written down without any styling. A div is placed around a group of block level elements—for example, to wrap a heading plus a list of links to make a navigation menu. A span wraps a group of inline elements or (most usually) plain text. The key word is “group”: if a div wraps just one block-level element, or a span just one inline element, it's being used unnecessarily. For example, check out the way the div and span elements are used in the following simple markup:
W3C
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<h1><span class="grey_bg">Hey</span></h1>
I figured out that I had to target the h1 as well in the css:
.grey_bg h1 {
background: #C0C0C0;
}
Here is my code.
<div class="start">start</div>
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
...................
...................
<div>middle-n</div>
<div class="end">end</div>
I want to apply css to all div's when mouse hover the first div with class start.
With the current HTML structure you can use couple of sibling selectors for this.
.start:hover ~ div {
color: red; /* styles you want to apply */
}
/* reset styles back for all other divs after .end */
.start:hover ~ .end ~ div {
color: inherit;
}
Demo: http://jsfiddle.net/3c6V6/1/
However I would recommend to change HTML structure if you can. For example:
<div class="start">start</div>
<div class="middles">
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
<div>middle-n</div>
<div class="end">end</div>
</div>
<div>after-1</div>
<div>after-2</div>
and CSS:
.start:hover + .middles > div {
color: red;
}
You would just have much more flexibility.
Demo: http://jsfiddle.net/3c6V6/2/
Could it be as simple as putting a parent container around it, and putting the hover on that, or do you wish to single out some of the siblings directly?
In this case, try putting :hover on the parent container like this:
.parent:hover div {/*style*/}
This is for your second version found in the comments: JSFiddle DEMO
div.start:hover~div.middles div:not(.end) {
font-weight: bold;
}
(This is for your original question):
div.start:hover~div:not(.end) {
font-weight: bold;
}
JSFiddle DEMO
This is where I found the information to do it. Didn't know there were so many CSS selectors.
I want to see 2nd div when mouse Over.
HTML
<a>Hover over me!</a>
<div class="ab">Some content</div>
<div class="abc">Some text here</div>
CSS
.abc {
display: none;
}
a:hover + .abc{
display: block;
}
The adjacent sibling combinator is not exactly what you want. It can only select the div with the class .ab, because it's directly following the anchor.
What you want is this:
a:hover ~ .abc {
/*...*/
}
This selects every .abc which is following a hovered anchor element, but it don't has to be directly before it.
Had some delay reaching SO so this is late. Here a fiddle for my answer: http://jsfiddle.net/digitalextremist/F5k4L/
The main issue here uses #kleinfreud's suggestion about an adjacent div but weaves in another approach to showing and hiding a div:
.abc {
opacity: 0;
}
a:hover ~ .abc{
opacity: 100;
}
This makes sure the space that div will take up is reserved to begin with, then showing it when needed.
For the given example:
<div class="menu">
<div class="menu_top">Menu1<div class="sub_menu">SubMenu1</div></div>
<div class="menu_top">Menu2<div class="sub_menu">SubMenu2</div></div>
<div class="menu_top">Menu3<div class="sub_menu">SubMenu3</div></div>
</div>
How can I change the display property for the respective childs elements?
I was trying the solution:
.menu_top .sub_menu{
display: none;
}
.menu_top:hover div.sub_menu{
display: block;
}
But all the "sub_menu" are shown when the mouse is over any "menu_top".
You want to display the .sub_menu when hovering over .menu_top?
.menu .menu_top:hover .sub_menu {
display: block;
}
The selector should be .menu_top:hover if you only want to display the respective child .sub_menu on hover.
See it in action - http://jsfiddle.net/spBJH/
You just need a minor change i think.
You have .menu:hover instead of .menu_top:hover
try this instead:
.menu .sub_menu{
display: none;
}
.menu_top:hover div.sub_menu{
display: block;
}
Try:
.menu_top:hover div.sub_menu {
display:block;
}
5.6 Child selectors
A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">".
The following rule sets the style of all P elements that are children of BODY:
body > P { line-height: 1.3 }
The following example combines descendant selectors and child selectors:
div ol>li p
It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out.
You've got them switched.
.menu:hover = { do something when I hover over .menu }
I think what you want is:
.sub_menu:hover { this }