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>
Related
I have a cssSelector which is div.formErrorContent but with this there are 4 matched elements out of 4 I need to locate 1st element.
Can any one help me ?
I know how to write xpath for the same as :
(//div[#class='formErrorContent'])[1]
But I want css locator.
without any html structure provided by you, i made 2 simple examples.
A. selecting with :first-child selector or :nth-child works only if the 4 divs with same class are all children of the same container, and are the only ones inside that container
see code snippet below
#wrapper {
background:blue
}
.formErrorContent{
height:100px;
background:red;
width:100px;
}
.formErrorContent:first-child {
background:green;
}
.formErrorContent:nth-child(2) {
background:yellow;
}
.formErrorContent:nth-child(3) {
background:white;
}
.formErrorContent:last-child {
background:black;
}
<div id="wrapper">
<div class="formErrorContent">
</div>
<div class="formErrorContent">
</div>
<div class="formErrorContent">
</div>
<div class="formErrorContent">
</div>
</div>
B. or if you have more elements in that container, you can select the first div with that class depending on what element you have before it ( CSS = cascading style sheet so you can select only from top to bottom of the HTML structure, not the other way )
for example if you have a p element before .formErrorContent you should use the sibling connector + like so
p + .formErrorContent { background:green }
see snippet below :
#wrapper {
background:blue
}
p {
color:white
}
.formErrorContent{
height:100px;
background:red;
width:100px;
}
p + .formErrorContent {
background:green;
}
<div id="wrapper">
<p>
This is a p element sibling of the other divs in this container
</p>
<div class="formErrorContent">
</div>
<div class="formErrorContent">
</div>
<div class="formErrorContent">
</div>
<div class="formErrorContent">
</div>
</div>
what i want to point out is that there are a number of ways to achieve what you want, but it depends on the html structure
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.
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 have a wrapper. Inside that wrapper I have 3 divs. I would like #contentOne standing above #contentTwo and contentThree standing on the right side of those two. I am sure someone can help. Thank you in advance for your replies. Cheers. Marc. (This positioning thing is killing me....)
http://jsfiddle.net/Qmrpu/
My HTML:
<div id="wrapper">
<div id="contentOne" class="content">contentOne</div>
<div id="contentTwo" class="content">contentTwo</div>
<div id="contentThree" class="content">contentThree</div>
</div>
My CSS:
#wrapper{
width:430px;
float:left;
height:auto;
border:2px solid blue;}
.content{
border:1px solid black;
background-color:yellow;
width:200px;
height:100px;}
#contentThree{
height:130px;}
Can you put them in floated column wrappers?
<div id="wrapper">
<div id="column1" class="column">
<div id="contentOne" class="content">contentOne</div>
<div id="contentTwo" class="content">contentTwo</div>
</div>
<div id="column2" class="column">
<div id="contentThree" class="content">contentThree</div>
</div>
</div>
CSS:
.column {
float: left;
}
http://jsfiddle.net/xbcxs/
That's how I would've done it. Notice the position:relative on the wrapper div and position:absolute; right:0; on the third div.
http://jsfiddle.net/remibreton/7javg/
HTML is lacking in providing functions for vertical positioning. They are getting better with newer display values, but you need to limit your audience to only modern browsers. Barring that you need to change the order of the HTML to get the vertical position you want. In this case if you put the 3rd section at the top and gave it a float:right you get what you are after.
http://jsfiddle.net/Qmrpu/1/
Why not use a table for layout?
http://jsfiddle.net/Qmrpu/3/
try this:
<div id="wrapper">
<div id="contentThree" class="content">contentThree</div>
<div id="contentOne" class="content">contentOne</div>
<div id="contentTwo" class="content">contentTwo</div>
</div>
#wrapper{
width:430px;
float:left;
height:auto;
border:2px solid blue;}
.content{
border:1px solid black;
background-color:yellow;
width:200px;
height:100px;}
#contentThree{
height:130px;
float: right;
}