<div class='container'>
<div class='item'>
<div class='date'>
<a></a>
</div>
<div class='work'>
<a></a>
</div>
<div class='info'>
<a>$row[info]</a>
</div>
</div>
<div id="footer">
</div>
</div>
I have border-bottom for class info:
.info {padding-bottom: 10px; border-bottom: 1px dashed #C8C8C8;}
But I dont want border for last child but it is not working. All borders disappears.
.info:last-child {border-bottom: none;}
Why is that? And what is the best solution?
I am not sure what you're trying to achieve? Your trying to apply :last-child when you've only got one child to target, therefore it will not appear.
It would work if there were more than one .info
See here: http://jsfiddle.net/ELk4E/ - In the fiddle I've replicated div.info three times, and the 3rd and last has the border-bottom removed via the :last-child
However, if you have div.info on your page several times but within different parents, this will not work. Such as:
<div class='container'> <!-- parent 1 -->
<div class='item'>
<div class='date'>
<a></a>
</div>
<div class='work'>
<a></a>
</div>
<div class='info'>
<a>Last Child</a>
</div>
</div>
<div id="footer">
</div>
</div>
<div class='container'><!-- parent 2 -->
<div class='item'>
<div class='date'>
<a></a>
</div>
<div class='work'>
<a></a>
</div>
<div class='info'>
<a>Last Child</a>
</div>
</div>
<div id="footer">
</div>
</div>
In this example you could use the following CSS to remove the border-bottom of the last container's div.info:
.info {padding-bottom: 10px; border-bottom: 1px dashed #C8C8C8;}
.container:last-of-type .info {border-bottom: none;}
Basically the :last-child selector matches every element that is the last child of its parent. See here: http://www.w3schools.com/cssref/sel_last-child.asp
Try this one
.info:last-child {border-bottom: none; !important}
Related
I have a sass block that i have tried several different ways:
I've tried this:
.progress-body {
display: none;
&:first-of-type {
display: block;
}
}
and this:
.progress-body {
&:not(:first-of-type) {
display: none;
}
}
and this:
.progress-body:not(:first-of-type) {
display: none;
}
when applied to HTML that looks like this:
<div class="panel">
<div class="panel-heading">
</div>
<div class="panel-body progress-body">
<div class="row">
<div class="col-md-12">
<p class="lead">Step 1: Choose your template...</p>
</div>
</div>
</div>
<div class="panel-body progress-body">
<div class="row">
<div class="col-md-12">
<p class="lead">Step 2: Compose your email...</p>
</div>
</div>
</div>
</div>
the result is that it hides all the elements with the progress-body class. This is normally pretty straight forward CSS so no idea what is wrong here...
In this case progress-body is not the first-of-type, this would technically be .panel-heading since the first-of-type refers to the type element selector (div) and not the class.
The :first-of-type CSS pseudo-class represents the first element of
its type among a group of sibling elements.
Ref: :first-of-type - CSS | MDN
Consider wrapping your .progress-body elements in a containing element, you will achieve the expected behaviour, since .progress-body would be the first of its type with the class name .progress-body.
Code Snippet Demonstration:
.progress-body:not(:first-of-type) {
display: none;
}
<div class="panel">
<div class="panel-heading">
</div>
<div class="panel-outer-body">
<div class="panel-body progress-body">
<div class="row">
<div class="col-md-12">
<p class="lead">Step 1: Choose your template...</p>
</div>
</div>
</div>
<div class="panel-body progress-body">
<div class="row">
<div class="col-md-12">
<p class="lead">Step 2: Compose your email...</p>
</div>
</div>
</div>
</div>
</div>
If you can't wrap as UncaughtTypeError wrote in his answer, youcan use (general) sibling selectors.
.progress-body + .progress-body {display: none;}
or
.progress-body ~ .progress-body {display: none;}
I expect the first is block by default, if you didn't change it elsewhere.
trying to target just the first .row but i seem to be targeting all rows. Why isn't first-child working? Here's my code:
<footer class="f1">
<div class="container">
<div class="row">
<div class="col-md-5">
<img src="/images/logo_footer.png" alt=""/>
</div>
<div class="col-md-7"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-5">
<img src="/images/logo_footer.png" alt=""/>
</div>
<div class="col-md-7">
</div>
</div>
</div>
</footer>
CSS
.f1 .container .row:first-child {
padding-top:42px;
position:relative;
}
The pseudo selector :first-child is targeting the first child of each thing that matches the selector: .f1 .container .row. Since you have two instances of containers and each with a row as a child, the selector is affecting the first child of each. If you want only the row of the first container to be affected, you need to specify the first container as well. Ex: .f1 .container:first-child .row
Use the below css selector it should be affecting for all rows.
.f1 .container .row {
padding-top:42px;
position:relative;
}.
It should work.
I have the following markup:
<div class="class-XXX">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
For simplicity, lets assume that class-XXX can only have the values class-1, class-2, class-3 and class-4.
I want to apply the rule color: #fff; to every child of class-5 that is not a child of class-1. Here that part of my stylesheet:
.class-2 .class-5,
.class-3 .class-5,
.class-4 .class-5 {
color: #fff;
}
This is not working and I'm not really sure why. I don't believe that the rule is being overridden either.
UPDATE
As AndrewBone pointed out, the rule appears to work in a minimal example. I now understand what is wrong, but I don't know how to fix it:
There is a rule being applied to h1 in another CSS file (can't be removed) and that rule is being given higher priority than the rule I was writing. How can I fix this?
Here is an example JSFiddle.
SOLUTION
Vucko pointed out that the h1 type selector has higher priority and so the rule will not be applied. So, in order to avoid listing all possible combinations one should use the * selector!
End result:
.class-2 .class-5 *,
.class-3 .class-5 *,
.class-4 .class-5 *{
color: #fff;
}
My thanks to Paulie_D and David Wilkinson for teaching me about the :not pseudo-selector.
This would do it..
[class^="class-"]:not(.class-1) .class-5 {
*/ your styles here */
}
...but this only works for a specific methodolody in classnames as above.
[class^="class-"]:not(.class-1) .class-5 {
color: red;
}
<div class="class-1">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-2">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-3">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-4">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-5">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
If you have some container for those divs, you can then use the :not selector (as Harry mentioned in the comment):
.main :not(.class-1) .class-5 {
color: red;
}
<div class="main">
<div class="class-1">
<div class="class-5">
<!-- could be any text element -->
<h1>1</h1>
</div>
</div>
<div class="class-2">
<div class="class-5">
<!-- could be any text element -->
<h1>2</h1>
</div>
</div>
<div class="class-3">
<div class="class-5">
<!-- could be any text element -->
<h1>3</h1>
</div>
</div>
<div class="class-4">
<div class="class-5">
<!-- could be any text element -->
<h1>4</h1>
</div>
</div>
<div class="class-5">
<div class="class-5">
<!-- could be any text element -->
<h1>5</h1>
</div>
</div>
</div>
.main :not(.class-1) .class-5 {
color: red;
}
JSFiddle
This does the trick: https://jsfiddle.net/023rox1k/
CSS:
.wrapper :not(.class-1) .class-5 {
color: blue;
}
HTML:
<div class="wrapper">
<div class="class-1">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-2">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-3">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-4">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
</div>
The :not selector is quite powerful and obviously targets elements not of a certain class in this case.
I am trying to select every other div with a class name. the issue is there are all in different parent div's. I've tried many things with sibling selection but have not yet found a solution. This is what I am looking for:
Add a margin of 30px to ever even div with the class name article
<div class="wrapper">
<div class="section">
<div class="article"><!--No Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--Add Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--No Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--Add Margin here-->
</div>
</div>
</div>
I tried something like this but did not work:
.section > .article:nth-child(even){
margin-right: 30px;
}
Rather than select the even/odd .article elements, you need to select the even/odd .section elements.
.section:nth-child(even) > .article
{
/* Your css here */
}
Fiddle: http://jsfiddle.net/jakelauer/4PMbS/
I have simple example with a header and content divs. I want there to be a 10 pixel margin after the header div, but it is showing up after the content div. The header div has two floating divs. Following is the code:
<style type="text/css"
div {border: 1px solid red;}
#container{width:680px;}
#header{margin-bottom:10px; background-color:yellow;}
#title{float:left;}
#link{float:right;}
#header_clear{clear:both;}
</style>
<div id="container">
<div id="header">
<div id="title">Header Title</div>
<div id="link" style="float:right;">
Link
</div>
<div id="header_clear"/>
</div>
<div id="content" style="background-color:brown;">
This is the body.
</div>
</div>
Here's what it looks like. You can see that the 10px margin is below the content div instead of the header div.
margin-bottom not working
<style type="text/css">
div {border: 1px solid red;}
#container{width:680px;}
#header{margin-bottom:10px; background-color:yellow;}
#title{float:left;}
#link{float:right;}
#header_clear{clear:both;}
</style>
<div id="container">
<div id="header">
<div id="title">Header Title</div>
<div id="link">
Link
</div>
<div id="header_clear"></div>
</div>
<div id="content" style="background-color:brown;">
This is the body.
</div>
</div>
Seems it didnt like the self closing div