I am having trouble getting :last-child to work in my situation.
HTML:
<div class="test">Some content</div>
<div class="test">Some content</div>
<div class="test">Some content</div>
<div class="action">Some other content</div>
CSS:
div.topic {
border-bottom: 1px solid black;
}
div.topic:last-child {
border-bottom: none;
}
JSFiddle
The last div.test still has the border at the bottom.
The problem I think is that the border-bottom: none applies to the very last div which is div.action and not to the last div of class test.
How can I solve it?
You will have to update your markup in order to achieve desired result. Wrap your unknown items in a wrapper, eg:
Working DEMO
<div id="list">
<div class="topic">Some content</div>
<div class="topic">Some content</div>
<div class="topic">Some content</div>
</div>
<div class="action">Some other content</div>
then use this CSS:
#list .topic {
border-bottom: 1px solid black;
}
#list .topic:last-child {
border-bottom: none;
}
I'd suggest using first-child, not last-child.
div.topic {
border-top: 1px solid black;
}
div.topic:first-child {
border-bottom: none;
}
This works with your current HTML, and is more cross-browser compatible.
Related
I´m trying to do something similar to this: https://stackoverflow.com/a/8539107/1743291
I want to give the first element of a class a different style from the other elements using the same class.
So I created something like this following the workaround from the post above:
.kn-menu > .control.has-addons {
border: 1px solid red;}
.kn-menu > .control.has-addons ~ .control.has-addons {
border: none;}
But this is not working for me.
Can anyone tell me what is wrong with my approuch?
Thanks!
You can use the first-of-type pseudo class:
.test {
width: 200px;
height: 100px;
margin: 10px;
background-color: green;
}
.test:first-of-type{
background-color: red;
}
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
suppose you have three divs within a parent section like this:
<section class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</section>
And on your CSS you have styles for those divs with class name "child":
.parent .child{
border:0;
}
You can give particular properties to the first div like this:
.parent .child:first-child{
border: 1px solid #000000;
}
Or select child what you want:
.parent .child:nth-child(3){
border:1px solid #ffffff;
}
if i understand it correct you just want to difference the first element. I think that solution can be use pseudo class first-of-type
HTML
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
CSS
.item {
color: red;
font-size: 32px;
}
.item:first-of-type {
color: blue
}
https://codepen.io/smil3cz/pen/GRjYyyL
What's the typical way to add a border between children of different elements in a div?
In the following example, there should be borders between p,div and div,img.
<div id="list">
<p>child 1</p>
<div>child 2</div>
<img src="">
</div>
If all the children were div, #list > div~div { border-top: 1px solid black } would be sufficient, but with different elements, this seems impractical. I attempted #list > ̃ { border-top: 1px solid black } with no success. However, #list > :not(:first-child) { border-top: 1px solid black } did work. While it's a working solution, I was wondering if there was a better way?
It depends on your expectation of the final layout. Firstly, I assume you want the elements inside #list to be horizontally aligned. I use a flexbox for that in my code below.
You can define a border at the right of the elements except for the last one:
#list {
display: flex;
align-items: center;
}
#list>*:not(:last-child) {
border-right: thick solid blue;
}
<div id="list">
<p>child 1</p>
<div>child 2</div>
<img src="http://placehold.it/50">
</div>
However, if you need to use margins for specific elements, the borders may no longer be aligned vertically.
#list {
display: flex;
align-items: center;
}
#list>*:not(:last-child) {
border-right: thick solid blue;
}
<div id="list">
<p style="margin: 1em;">child 1</p>
<div>child 2</div>
<img src="http://placehold.it/50">
</div>
<div id="list">
<p>child 1</p>
<div>child 2</div>
<img src="http://placehold.it/50">
</div>
#list :not(:last-child) {
border-bottom: 1px solid red;
}
This shoud work aswell
#list * {
border: 1px solid red;
}
https://jsfiddle.net/84djw33j/2/
Try using :first-of-type, :last-of-type, and :only-of-type pseudo-selectors Here's a useful link
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 100%;
}
Please look at my code at JS Fiddle
I'm wanting to get div 1 to stretch the height of both divs 2 and 3, like you would do with table's rowspan.
I'm not proficient enough with understanding how to do table stuff in divs to figure this one out.
Thanks!
You can use the table/table-cell display css options.
UPDATED Fixed stretching issue.
<div style="display:table">
<div style="display:table-cell;height:100%;" class="div1">
1
</div>
<div style="display:table-cell;width:100%">
<div class="div2">2</div>
<div class="div2">3</div>
</div>
</div>
Link to JSFiddle: https://jsfiddle.net/pho5p7cc/8/
Here's what I would do. Create a div around all of your current div, then use css positioning to edit the lengths within the div.
Here's an example,
http://jsfiddle.net/tjgerot/v2469Leu/
<div class="table">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
</div>
I would use a container to hold your DIV 2,3. Then margin the left of the container to allow space for your DIV 1.
Im not sure it's the smoothest way to code, but it works.
https://jsfiddle.net/pho5p7cc/3/
html
<div class="div1">1</div>
<div class="container">
<div class="div2">2</div>
div class="div2">3</div>
</div>
css
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 50px;
margin-left:20px;
}
.container{
}
Need help guys I have this HTML code:
<div class="editable">
<div>
<div class="column col1of5">
</div>
<div class="column col1of5">
</div>
<div class="column col1of5">
</div>
<div class="column col1of5">
</div>
<div class="column col1of5">
</div>
</div>
</div>
I want to select the last .col1of5 through css how can I do that?
Use this CSS to get the last child :
.parentDiv .col1of5:last-child {
/* CSS */
}
I just saw your HTML.
Here is the solution. refer this fiddle.
The HTML
<div class="editable">
<div>
<div class="column col1of5">1</div>
<div class="column col1of5">2</div>
<div class="column col1of5">3</div>
<div class="column col1of5">4</div>
<div class="column col1of5">5</div>
</div>
</div>
The CSS
.editable div {
background: none repeat scroll 0 0 #292929;
color: white;
list-style: none outside none;
padding-left: 0;
width: 200px;
}
.editable div div {
border-bottom: 1px solid black;
border-top: 1px solid #3C3C3C;
padding: 10px;
}
.editable div div:first-child {
border-top: medium none;
}
.editable div div:last-child {
border-bottom: medium none;
color: red;
}
Hope this helps.
Try this:
.col1of5:last-child {
/* my CSS rules */
}
:last-child is a pseudo selector and it points to the element that is the last child element of a certain node. It may sound logical enough but it can be confusing, since you may think it should be .editable:last-child. You should apply the selector to the child element itself, not the parent.
I have a simple row listing certain funding opportunities. I'm confused to a behaviour that is occurring with the CSS/HTML code where there will be a gap between entries on the list if I don't use separate classes.
For example, the below picture indicates what happens when I use:
<div class="panel-inside">
<div class="row">
<div class="label">Funding Opportunity 1</div>
<div class="label-date">Sep. 16, 2012</div>
</div>
<div class="listSeparator"></div>
<div class="row">
<div class="label">Funding Opportunity 2</div>
<div class="label-date">Dec. 2, 2012</div>
</div>
</div>
However if I close each "panel-inside" class then the result is different.
<div class="panel-inside">
<div class="row">
<div class="label">Funding Opportunity 1</div>
<div class="label-date">Sep. 16, 2012</div>
</div>
</div>
<div class="listSeparator"></div>
<div class="panel-inside">
<div class="row">
<div class="label">Funding Opportunity 2</div>
<div class="label-date">Dec. 2, 2012</div>
</div>
</div>
I need the formatting to be like the second picture, but I don't understand why I have to close each "panel-inside" class. Shouldn't that div be the 'container' for rows? I think the reason the gap is there is because the second row starts where the text from the one before it left off, but I have no idea how to fix this. I've included the CSS code below with border colour outlining to help differentiate the elements. Thanks for any help!
.panel-inside {
border: 3px dotted purple;
border-left: 2px solid #D6D3D6;
border-right: 2px solid #D6D3D6;
background: white;
padding-left: 0px;
padding-right: 0px;
overflow:auto;
border-radius:7px;
}
.row
{
height: 40px;
width:100%;
vertical-align:middle;
}
.label
{
border: 1px dotted blue;
font-family: BBAlpha Sans;
font-size: 15pt;
display:inline;
float:left;
line-height:40px;
margin-left:5px;
}
.label-date
{
border: 1px dotted black;
font-family: BBAlpha Sans;
font-size: 12pt;
color:#686868;
display:inline;
float:right;
line-height:40px;
margin-right:7px;
}
.listSeparator
{
border-bottom: solid 1px Silver;
}
Try modifying the listSeparator class like so:
.listSeparator
{
border-bottom: solid 1px Silver;
clear:both;
}
This happens because you don't clearfix the .row class properly, but the outside extra div serves as a partial resetter.
Seriously - when you have tabular data and a tabular structure - use tables... far more robust and crossbrowser compatible.
Optionally - add overflow:auto; to your .row OR clear:both;to .listSeparator, this should solve the issue.
edit: you can omit the height when using overflow and also omit the .listSeparator (by adding the border to .row).
Here is the solution without closing class="panel-inside" class for every row.
HTML is similar as first condition but one difference -
<div class="listSeparator"> </div>
Css:
.listSeparator { border-bottom: solid 1px Silver; clear:both;}
Clear allows floated elements occuring earlier in the document to float along its sides.
So by using clear:both means that your div will shifted in the end of other floating elements beside your div.
http://www.free-scripts.net/html_tutorial/css/properties/classify/clear.htm
http://www.positioniseverything.net/easyclearing.html