i want to change other element outside current element level in CSS3. i have tried to use plus symbol but still not working.
<div id="a">
<div id="a_1">
<ul>
<li>test1</li>
<li>test2</li>
</ul>
</div>
</div>
<div id="b">
</div>
i want to change #b background-color i try this but not still work
a ul li:hover #b{
background-color:blue;
}
and also tried this but not working too
a ul li:hover + #b{
background-color:blue;
}
You must use JavaScript or JQuery for that.
Related
My HTML code is as follows:
<div class="c1"> Heading
<div>
<ul style="display:none">
<li>Item1</li>
<li>Item1</li>
</ul>
</div>
</div>
This is my CSS :
.c1:hover > div ul
{
display:block;
}
How do I access lower level children with ">" operator? I basically want the list to be displayed on hover of c1.
You need to remove the inline style (style="display:none") from your markup - inline style will override the styles loaded from the stylesheet.
Instead, put this in your stylesheet:
.c1 > div ul {
display:none;
}
.c1:hover > div ul {
display:block;
}
Do this -
Demo
<div class="c1"> Heading
<div>
<ul>
<li>Item1</li>
<li>Item1</li>
</ul>
</div>
</div>
CSS
ul{ display: none; }
.c1:hover div ul
{
display:block;
}
I have a div whose height span 2 rows. But I want to the following div fit into the bottom left and bottom right corner:
http://jsfiddle.net/netnet/NNH6V/
before browse, please drag the splitter to left and you will see the checkbox2 and "2222222222" could be fit into bottom left and bottom right perfectly.
I can use the relative position(.VerticalUp class). But the problem is it will leave a empty row underneath, which I don't want.
Any idea?
If you are trying to float the Hematology div, you have two of them that are causing conflict. If you change .Hematology { float: right; }, this will make the Prenatal content float right...making everything fit...
try float with position.
ps-i'm new here. don't have much experience. :)
Hey now change to your code as like this because your code is difficult i have created new code please check it. and implement your projects according design
Css Code
.top, .bottom{
list-style:none;
color:#fff;
}
.top li, .bottom li{
display:inline-block;
background:green;
width:33%;
vertical-align: top;
border-top:solid 10px red;
}
p{
display:inline-block;
vertical-align: top;
}
.bottom {
position:absolute;
left:0;
right:0;
bottom:0;
}
.bottom li:last-child{
float:right;
}
HTML code
<ul class="top">
<li>
<input type="checkbox">
<p>first Check box</p>
</li>
<li>
<input type="checkbox">
<p>Second Check box</p>
</li>
<li>
<p>finel box</p>
</li>
</ul>
<ul class="bottom">
<li>
<input type="checkbox">
<p>first Check box</p>
</li>
<li>
<p>finel box</p>
</li>
</ul>
Live demo http://jsfiddle.net/fAkY5/
I got a problem for you to solve, as you know.
I ripped off all my hair trying to figure out why the heck last-child isn't working.
I tried to remove border-right with last-child but for some reasons, it didn't work out.
Here's is the link
Your selector is #countdown .num:last-child.
Your HTML is
<ul ID="countdown">
<li> <div ID="days" class="num">00</div> <div CLASS="text">days</div> </li>
<li> <div ID="hours" class="num">00</div> <div CLASS="text">hours</div> </li>
<li> <div ID="mins" class="num">00</div> <div CLASS="text">minutes</div> </li>
<li> <div ID="secs" class="num">00</div> <div CLASS="text">seconds</div> </li>
<div class="clear"></div>
</ul>
Think: is .num the last child of its parent? Answer: no.
Your selector should be more like #countdown > li:last-of-type .num, selecting .num inside the last li in #countdown.
Note that in this case last-of-type must be used rather than last-child because you've got that <div class="clear"></div>, which is invalid HTML (you can't have a div directly inside a ul).
The main reason why the last-child is not working because in your #countdown UL the last-child is <div class="clear"></div> not LI. So it's better to use last-of-type instead of last-child. Like this:
#countdown li:last-of-type .num,
#countdown li:last-of-type .text{
border:0;
}
Check this http://jsbin.com/apuhep/4/edit#html,live
Inside your ul element, there is a div element after the last li element. This is invalid markup and may have unpredictable effects. Moreover, it probably makes browsers treat the div element the last child of the ul element.
I have the following
CSS
.streamBox {
font-size:12px;
background-color:#EDEFF4;
border-bottom:1px solid #E5EAF1;
margin-top:2px;
padding:5px 5px 4px;
}
.streamBox:last-child {
border: none;
}
HTML
<ul id="activityStream">
<li class="story">
<div class="streamBox nobkgcolor" id="">
Stuff
</div>
</li>
<li class="story">
<div class="streamBox nobkgcolor" id="">
Stuff
</div>
</li>
<li class="story">
<div class="streamBox nobkgcolor" id="">
Stuff
</div>
</li>
</ul>
I thought the last-child selector would make it so the last DIV doesn't hav ea border... But instead all DIVs now don't have borders? y?
Suggestions on how w CSS to make it so JUST the last div doesn't have the border?
Thanks,
For updated question:
Your selector needs a tweak, it should be:
li:last-child .streamBox {
border: none;
}
The <div class="streamBox"> is both the first and last child of its parent, so your current selector matches all of them, instead you want the <div> inside the last <li>, so use the :last-child on the <li>, you can test it here (I changed the border to black to make it more obvious).
For previous question:
It's because you're missing a quote on the class="" attribute, fix it like this:
<div class="box">blah blah</div>
<div class="box">blah blah</div>
<div class="box">blah blah</div>
<div class="box">blah blah</div>
It'll then work as intended, the first 3 having borders, you can test it here.
I have a menu div which has a dark background. Inside it, I have several menu item divs with 1px margins on the right and the left. This way I've got separators between them. Obviously these appear on the very left and very right side of the menu which I don't want. Is there a way to accomplish this without inserting 1-pixel divs as separators?
Thank you
edit: sorry, I thought it was descriptive enough. Here is the code:
<div id="menu">
<div class="menu_item"><img src="imgs/menu/szabalyzat.png" /></div>
<div class="menu_item"><img src="imgs/menu/profil.png" /></div>
<div class="menu_item"><img src="imgs/menu/zenekarok.png" /></div>
<div class="menu_item"><img src="imgs/menu/jelentkezes.png" /></div>
<div class="menu_item"><img src="imgs/menu/esemenynaptar.png" /></div>
<div class="menu_item"><img src="imgs/menu/mmmk_estek.png" /></div>
</div>
IE6 incompatibility is OK (thankfully).
The following rule will apply to all .menu_item elements that follow another .menu_item element:
.menu_item + .menu_item {
border-left: 2px solid black;
}
The simplest way yo achieve it is to mark your first and last elements with custom classes and remove that margins from them.
<ul class="menu">
<li class="first">One</li>
<li>Two</li>
<li>Three</li>
<li class="last">Four</li>
</ul>
<style>
.menu li { margin: 0 1px; }
.menu .first { margin-left: 0; }
.menu .last { margin-right: 0; }
</style>
You can also try using complex css selectors, like :first-child, but they do not work in older versions of MSIE.
OR, you can use 2px margins on the right side instead and go with only one additional class:
<ul class="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li class="last">Four</li>
</ul>
<style>
.menu li { margin-right: 2px; }
.menu .last { margin-right: 0; }
</style>
If a high percentage of your audience's browsers support CSS3, you can use the :first-child and :last-child pseudo-classes:
div#menu div:first-child {
margin-left: none;
}
div#menu div:last-child {
margin-right: none;
}
Can't you have 2px left-margin instead of 1px on each side and then use the css pseudo class :first-child to remove these margin for the first item ?
EDIT: I agree with the fact that you should use border as separator rather than background but in case you do this that way for some good reasons, my answer's still valid :-)