I'm aware of the ':last-child' pseudo selector in CSS, but what I want to do is remove the margin-bottom from the last child of each 'last' element in the div.
For example:
<div id="box1" class="box">
<div class="input-group"></div>
<div class="input-group"></div>
<div class="input-group"></div>
</div>
<div id="box2" class="box">
<div class="input-group"></div>
<div class="input-group"></div>
<div class="input-group"></div>
</div>
So what I want to happen, is for each .box, I want the last .input-group to have no margin?
Now obviously :last-child will remove the margin-bottom from the immediate-last child of .input-group, but I want it to recognise when it's the last child of each .box, I'm not sure if I'm making sense here or not.
If that isn't possible, what other ways around it are there?
Cheers!
Mark
.input-group:last-child should work without any changes.
.input-group:last-child{
margin-bottom: 0px;
}
JS Fiddle: http://jsfiddle.net/F7W8p/2/
If you have other .input-group elements outside of box you can add .box to the selector:
.box .input-group:last-child{
margin-bottom: 0px;
}
Here is an example showing the selector in action: http://jsfiddle.net/F7W8p/3/
Try this
in your css document.
.box > .input-group:last-child {margin:0;}
Related
I want to have a separate style for each 4th element in a row.My html structure is like this
<main>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
</main>
and css is
.container:nth-child(4n) {
left: -2rem !important;
}
So it doesn't reflect on that 4th element.
Any help is highly appreciated. Thanks in advance.
Given the markup you provided, your selector will never match any of your elements as there is only one child .container element within each .a parent element. What you want to select is the .container child element of every 4th .a parent element, like so:
.a:nth-child(4n)>.container{
left:-2rem;
}
Note that the above is identical to:
main>div:nth-child(4n)>.container{
left:-2rem;
}
If you're asking wht the left property isn't being applied to that element then that's because you also need to give it a position. In this case, relative would probably suit your needs best.
.a:nth-child(4n)>.container{
left:-2rem;
position:relative;
}
Alternatively, you could also achieve the above with a single property by using the translatex transform function (although transform does still require some prefixing].
.a:nth-child(4n)>.container{
transform:translatex(-2em);
}
Update Css
.a:nth-child(4n) {
left: -2rem !important;
color:red;
}
Further Link
Since each .container class is surrounded by <div>'s, you cannot select it directly because there is only one child per <div>. If you want to select every element inside the <main>, you can do something like this:
CSS
main .a:nth-child(4n) {
color: red;
}
<main>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
</main>
JSFiddle
Here is my html code ,
<div class="parent">
</div>
I am adding one div inside the parent div on runtime, It would be like this ,
<div class="parent">
<div class='child'>
</div>
</div>
Is there is any way to add style to child div using parent div ? Means can I do something like ,
<div class="parent" style="SET LEFT MARGIN FOR CHILD ELEMENT ">
</div>
So when child is added to parent div , the style will be automatically applied to child.
Based on specification — no, you can't.
http://www.w3.org/TR/2002/WD-css-style-attr-20020515
You can't do this directly with inline css on parent div. But you can inherit styles from parent div like this:
CSS:
.child {
margin-left: inherit;
}
HTML:
<div class="parent" style="margin-left: 15px;">
<div class="child"> ... </div>
</div>
You can enclose the .child tags with i.e. < span > or < div > in this case, then set the inline CSS for the .parent tags, and then use "inherit" on the .child tag.
<div class="parent" style="color:yellow;">
<div class="child" style="color:inherit;">
</div>
</div>
The same was a successful solution applied to a similar problem I was facing regarding how the emails or links appeared inside a Gmail message body.
<div>
Hello <span style="color:yellow;">SomeMail#gmail.com</span>, we have just posted this on our website:
<br/>
Page Title of Website
</div>
I hope this offers a solution to your situation or at least inspires you closer to your preferred remedy.
Using the > for direct children:
.parent > div {
margin-left: 30px;
}
You can use this
<div class="parent">
<div class='child'>
</div>
</div>
CSS
.parent >.child {
margin-left: 30px;
}
I'm trying to convert a div element within a div to inline but its not working as expected.
Code:
HTML
<div id="price-results">
<div id="price"><div>Unit Price</div><div>5</div></div>
<div id="qty"><div>Quantity</div><div>2</div></div>
<div id="total"><div>TotalPrice</div><div>10</div></div>
</div>
CSS
#price,#qty{
display:inline
}
JSFiddle
I agree with the comment before.
Apart form that, your CSS needs to target the inside the container like this:
#price div,
#qty div,
#total div{
display:inline
}
… see this fixed jsFiddle.
Some other notes on your HTML + CSS:
you should consider using classes instead of IDs
You could also
target the elements by a single descendant rule like this (jsFiddle)
#price-results > div div {
display:inline
}
#price-results div{
display:inline
}
Update your css like below
#price, #qty{
display:inline-block;
}
Why dont you use float:left instead of display:inline
Here is the demo
Why nesting so many divs unnecessarilly. Its not compulsary to include every element in div. This works fine :-
<div id="price-results">
<div id="price">Unit Price 5</div>
<div id="qty">Quantity 2</div>
<div id="total">TotalPrice 10</div>
</div>
http://jsfiddle.net/qqTDq/2/
DIVs are block-level elements by default. I would switch the inner-DIVs to SPANs, which are inline by default:
<div id="price-results">
<div id="price"><span>Unit Price</span> <span>5</span></div>
<div id="qty"><span>Quantity</span> <span>2</span></div>
<div id="total"><span>TotalPrice</span> <span>10</span></div>
</div>
If your intention is to align the numbers then I would switch to a table.
*,div{
padding:0;
margin:0;
display:inline;
}
#price,#qty{
display:inline;
border:1px solid red;
}
When I use the following code, the last div overlaps the floated content:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;">test</div>
The common fix is to do this:
<div style="overflow:hidden;">
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
</div>
<div style="background:red;">test</div>
However, in my case, I cannot add in an extra element. Is there another workaround for this?
Edit:
clear:both; fixed the overlapping issue, but there's a margin on the last div, so it's something like this:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:both;margin-top:50px;">test</div>
And now the new problem is that the margin isn't showing up.
You could simply clear the floats...
<div style="background:red;clear: both;">test</div>
Try the following:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:left;">test</div>
EDIT. To get the margin-top, add margin bottom to the floated elements
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="background:red;clear:both;">test</div>
Set the clear property on your last <div> to left or both:
<div style="background: red; clear: left;">test</div>
Edit: As for the margin, you can do some relative positioning:
<div style="background: red; clear: left; margin-bottom: 50px; position: relative; top: 50px;">test</div>
There's no need to use floats here. Make the first two elements inline-block elements, and the third element a block-level element.
HTML:
<div class="inline-block">
Test
</div><div class="inline-block">
Test
</div>
<div class="block">Test</div>
Note that </div><div class="inline-block"> are touching. Because these two element are inline-block elements, any space in the markup will produce space in the presentation.
CSS:
.inline-block {
width: 50%;
display: inline-block; }
.block { margin: 50px 0 0; }
Preview: http://jsfiddle.net/Wexcode/eGPWt/
I am trying to create a 4 column <div> layout.
Why are the row containers not drawing a border around the respective row?
Also, is this a good approach, as in is my css written well to be fluid and for dynamic resizing of the browser window?
Any suggestions or help would be most appreciated.
Here is my current attempt.
You need to set the overflow to auto when using float. http://jsfiddle.net/gJJHs/
The problem seems to be that you are floating your columns, and when you float things, they take up effectively zero space.
I think the solution is to cancel the float in you "last" class and add a "dummy column" to each row.
This CSS seems to work:
.col
{
float: left;
width: 25%;
}
.last{
clear: left;
}
.row{
border: 1px solid green;
}
Revised HTML (with dummy last column):
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="last" />
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="last" />
</div>
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
As such, the border will seem like it is not bordering anything :( Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
As others have said, if you add overflow: auto; to your .row class, it'll take care of the problem. Here's another article that explains why to use overflow.
http://www.quirksmode.org/css/clearing.html
I hope this helps.
Hristo
it's the float left. That takes the divs "out of flow" and it's drawing the border around empty space essentially
Yet another option, in addition to the other answers, is to add overflow: hidden; to your .row.
The reason for the behavior you saw is that float takes the div outside of the normal flow. The div then essentially takes up no space in the document.
This makes sense if you think about the ostensible purpose of floating an image in order to wrap text around it. The next p tag (for example) is positioned as if the floated image wasn't there, i.e. overlapping the image. Then, the browser wraps the text within the 'p' tag around the image. (If the floated image was not "removed from the flow", the p tag would naturally appear below the image—not giving the desired effect.)
Here's how I'd write the code.
HTML:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="last">8</div>
</div>
CSS:
.col
{
float: left;
width: 25%;
}
.row{
border: 1px solid green;
overflow: hidden; /* "overflow: auto;" works just as well instead */
width:100%; /* Helps older versions of IE */
}
Add a "float:none;clear:both" to your .row and you'll see the rows appropriately. But for the fluid behavior and design that you are looking for, you'll want to apply some javascript (like jQuery Equal Height: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns/) to be consistent across browsers without a ton of CSS hacking.