Is there any way in css to select only the container child that is on hover without the parent, is this possible with css?
This is what I'm trying, the deepest container should be selected not the .decor which I added only to show the div that is selected.
(these childs are added dynamically without classes or id's)
This is very simple and I know it can be done easily with javascript but I wanted to know if there is a selector in css.
** jsFiddle **
HTML
<body>
<div class=container>
<div class=decor> </div>
</div>
<div class=container>
<div class=decor></div>
<div class=container>
<div class=decor></div>
</div>
</div>
</body>
CSS
html,body{margin:0;}
*{box-sizing:border-box;}
.container {
position:relative;
width:100%;
min-height:30px;
padding:5%;
border:4px solid blue;
}
.decor{
position:absolute;
top:1%;
right:1%;
height:10px;
width:10px;
padding:0;
background-color:green;
}
.container:hover > .decor {
background-color:red;
}
In your case I think the :only-child selector might work. Though I'm confused by the .decor elements...
Something like:
div:hover .decor:only-child {
background-color:red;
}
Here's the full jsFiddle.
Related
I am trying to style a div in wordpress. As you cant give anything IDs I have to select to using CSS3 :nth-child() Selector. I am trying to target the third div
My css rules I am trying but it not working any ideas where I am going wrong
#ninja_forms_form_175_all_fields_wrap:nth-of-type(2) {
padding: 0px;
}
<div id="ninja_forms_form_175_all_fields_wrap" >
<div class="ninja-row">
<div class="ninja-col-1-2">
try this: #ninja_forms_form_175_all_fields_wrap>div:first-of- type>div: first-of-type
You should do like this :
First wrap your three divs into a div
Then select the second one
.all-ninja div:nth-child(2) {
//Write your CSS
}
<div class="all-ninja">
<div id="ninja_forms_form_175_all_fields_wrap" >
<div class="ninja-row">
<div class="ninja-col-1-2">
</div>
If i m not wrong your markup should be something like this:
<div id="ninja_forms_form_175_all_fields_wrap" >
<div class="ninja-row">
<div class="ninja-col-1-2">
</div>
</div>
</div>
so you need to use direct class to style .ninaj-col-1-2 instead of using :nth-child
Below code should work
#ninja_forms_form_175_all_fields_wrap .ninja-col-1-2{
padding:0;
}
Try targeting that using div.
#ninja_forms_form_175_all_fields_wrap{
width:400px;
height:400px;
background:#ccc;
}
#ninja_forms_form_175_all_fields_wrap > .ninja-row{
width:100px;
height:100px;
border:1px solid #f22;
}
#ninja_forms_form_175_all_fields_wrap > .ninja-row > .ninja-col-1-2{
width:50px;
height:50px;
border:1px solid #fff;
}
#ninja_forms_form_175_all_fields_wrap > .ninja-row div:nth-child(1){
background:#111;
}
<div id="ninja_forms_form_175_all_fields_wrap" >
<div class="ninja-row">
<div class="ninja-col-1-2"></div>
</div>
</div>
I thought :first-of-type will effect the first-of-type which in my case is
<div class="box">I am the first box in div.center...</div>
If I remove the <div class="top"> the CSS works and adds the green-top-border.
But I need <div class="top">, so why is it not working if <div class="top"> is there?
FIDDLE
<div class="main-wrap">
<div class="center">
<h3>Lorem Ipsum</h3>
<div class="top">XXX XXX XXXX</div>
<div class="box">I am the first box in div.center. Why no top border?</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
.box {
width:100%;
height:30px;
margin:10px 0;
background-color:orange;
}
.main-wrap .center div.box:first-of-type {
border-top:4px solid green;
}
.box {
position:relative;
border-bottom:4px solid green;
}
When you have div.top there, that becomes the first div element within its parent. :first-of-type only looks at the type of element; div.box:first-of-type really means select div:first-of-type only when it has the class .box, and not the first div.box.
To reach the first div.box, use an adjacent sibling selector:
.main-wrap .center div.top + div.box {
border-top:4px solid green;
}
The CSS declaration is over-qualified. If this design pattern repeats through out the site then using the following sibling selector is just as good and cleaner:
.top + .box {
border-top: 4px solid green;
}
The browser looks at the declaration from right to left, so will scan for all the .box classes and then scan for the .box classes that are associated .top. By adding the additional classes, the browser is forced to re-scan 2 more times before applying the declaration styles.
This is what I have done till now.
<div style="overflow:visible;width:1050px;border:1px solid green;height:50px;margin-left:115px">
<div style="border:1px solid red;position:absolute;width:730px;">
<br/><br/><br/>
<div class=''><div class='tagstyle'>FRESHER</div><div class='tagstyle'>IT JOBS</div><div class='tagstyle'>2013</div><div class='tagstyle'>BANGALORE</div></div>
<!----- left --->
<div>
<div style="border:1px solid blue;height:900px;position:absolute;width:340px;margin-left:735px;">
<!------ right --->
<div>
</div>
Problem is, right side div going downward, when left side div has any content.
Aha! Saw your edit now! It's really simple with some css3 table display properties, but that doesn't work in old browsers.
However, you could use some simple css to make a standard blog template with sidebar, header and main content:
<style>
.body-wrapper {
position:absolute;
top:20px;
left:50%;
width:900px;
margin-left:-450px; /* Half the width (negative) */
background:red;
}
.header {
position:relative;
width:100%;
height:100px;
margin-bottom:10px;
background:blue;
}
.main {
float:left;
width:70%;
background:green;
}
.sidebar {
float:right;
width:30%;
background:yellow;
}
</style>
<div class="body-wrapper">
<div class="header">
Header!
</div>
<div class="main">
Content!
</div>
<div class="sidebar">
Sidebar!
</div>
</div>
Here is a jsFiddle as proof: http://jsfiddle.net/Kepk9/
Hope it helps!
Another answer!
If you just would like to position divs after each other, you could set them to display:inline-block, like this:
<style>
.inline {
display:inline-block;
}
</style>
<div class="inline">
Labalodado
<br/>multiline content
</div>
<div class="inline">
Less content
</div>
<div class="inline">
Another div
<br/>with
<br/>multiline content
</div>
The reason why your code doesn't work is really simple actually. I made some other answers first because I think that they are a better approach.
position:absolute doesn't automatically move the item to {0,0}
You have to set top:0px by yourself.
Oh.. and there are some mistakes in your code too, but just go with one of my other too answers and you'll be fine :)
I'm very new to CSS and have been sitting here for hours trying to figure out why my middle section is not displaying as a column. I've searched the net with apparently no success. I have tried repositioning the divs, clearing everything and floating the bejesus out of everything. It must be something simple, but I don't know what. Could anyone help?
I apologize for the large amount of code if that isn't appropriate, but I don't yet have anything uploaded.
Thanks in advance
HTML
<head><style type="text/css" media="all">#import "css/master.css";</style></head>
<body>
<div id="page-container">
<!-- RIGHT HAND PAGE -->
<div id="navbar">NavBar</div>
<div id="mediaplayer">Meda Player</div>
<div id="sightings">Sightings</div>
<div id="blogheader">Blog Header</div>
<div id="sociallinks">Social Links</div>
<!-- LEFT HAND PAGE -->
<div id="logo">Logo</div>
<div id="mainpic">MainPic</div>
<!-- CENTRE PAGE -->
<div id="headline">Headline</div>
<div id="newsitems">News Items</div>
<!-- FOOTER -->
<div id="footer">Footer</div>
</div>
</body>
</html>
CSS
#page-container {
width:960px;
margin:auto;
background:red;
}
html, body {
margin:0;
padding:0;
}
#logo {
background:purple;
height:150px;
width:270px;
margin-right:450px;
}
#mainpic {
background:darkgrey;
width:270px;
height:450px;
}
#navbar {
float:right;
background:lightblue;
height:50px;
width:690px;
}
#headline {
background:grey;
height:200px;
margin-left:270px;
margin-right:350px;
}
/* News Items Mock - height:350px */
#newsitems {
background:blue;
margin-left:270px;
margin-right:350px;
}
#mediaplayer {
clear:both;
float:right;
background:black;
height:200px;
width:350px;
}
/* Sightings Mock - height:150px; */
#sightings {
clear:both;
float:right;
background:green;
width:350px;
}
#blogheader {
clear:both;
float:right;
background:darkgreen;
height:40px;
width:350px;
}
#sociallinks {
clear:both;
float:right;
background:orange;
height:40px;
width:350px;
}
#footer {
background:yellow;
clear:both;
height:30px;
}
The problem i see is that you're trying to stack a series of divs one in top of the other without any containers to create a three-column page design, while that might be done with css it would be simpler to create a series of containers for each column that you can use to stack your divs under. Take this for example:
If you created a series of column divs you can easily stack all of your page sections inside of its own column, this way you can easily stack as many sections as you want in your page without having to comeback to your css and positioning it the way you're doing it now.
<div class="column">
<section>
<section>
</div>
<div class="column">
<section>
<section>
</div>
<div class="column">
<section>
<section>
</div>
Once you have your columns declared in your markup, you can then float them so they stack next to each other and then you can use a clearfix so they won't go under one another, like so:
.column:before, .column:after {
content:"";
display:table;
}
.column:after {
clear:both;
}
.column {
zoom:1; /* ie hasLayout fix */
float:left;
}
Here is a demo of your code with the columns implemented with the results i think you're looking for: http://jsfiddle.net/wSejZ/1/show/, you can edit the fiddle here: http://jsfiddle.net/wSejZ/1/.
Notice how the sections are stacked inside of a column, this way you can stack as many sections as you want and they will be stacked appropriately inside their container.
Suppose I have a document like
<style type="text/css">
div {
border:1px solid;
padding:15px;
}
#i_am_relatively_positioned{
background-color:#fcc;
margin:50px;
padding:50px;
position:relative;
}
#inner {
background-color:#cfc;
}
#i_want_to_be_absolute_to_body{
background-color:#ccf;
left:0;
position:absolute;
top:0;
}
</style>
<body>
<div id="i_am_relatively_positioned">
<div id="inner">inner</div>
<div id="i_want_to_be_absolute_to_body">absolute to body</div>
</div>
</body>
Is there a way to make #i_want_to_be_absolute_to_body positioned absolute with respect to the body element, rather than its immediate relative container?
I know I can just use some negative top and left but that seems kludgey - is this my only option?
You can use a bit of javascript to do this (I'm assuming you can't change the markup?).
document.body.appendChild(document.getElementById('i_want_to_be_absolute_to_body'));
Is it important, that the Element "i_want_to_be_absolute_to_body" is in the Container "i_am_relatively_positioned"?
If not then this solution:
<div id="i_am_relatively_positioned">
<div id="inner">inner</div>
</div>
<div id="i_want_to_be_absolute_to_body">absolute to body</div>