I have the following html
.resources .resource:first-child {
border-top: 1px solid #D9B310;
}
.resources .resource {
border-bottom: 1px solid #D9B310;
padding: 10px 0;
}
<div class="resources">
<h2 class="text-center">Ресурси</h1>
<div class="resource">
<h4>Минерали <span class="resource-quantity">3700</span></h3>
</div>
<div class="resource">
<h4>Газ <span class="resource-quantity">500</span></h3>
</div>
</div>
the selector without the first-child works fine. But the first-child selector it's not wrking in my case. Can someone tell me why ?
Because that the .resource element that you want to stylize is the second child of it's parent, the first child is the h1 tag (careful, your heading tags were not properly closed).
You may be mistaken :first-child with :first-of-type.
:first-child only selects the .resource elements that are the first child within their parent container.
:first-of-type selects the .resource elements that are the first element matching the given selector (.resource) within their parent container, but not necessarily on the first-child position.
You can either use :nth-child(2) or :first-of-type, as in your case the element is the second child.
.resources .resource:nth-child(2){
border-top: 1px solid #D9B310;
}
.resources .resource {
border-bottom: 1px solid #D9B310;
padding: 10px 0;
}
<div class="resources">
<h1 class="text-center">Ресурси</h1>
<div class="resource">
<h3>Минерали <span class="resource-quantity">3700</span></h3>
</div>
<div class="resource">
<h3>Газ <span class="resource-quantity">500</span></h3>
</div>
</div>
Use :first-of-type because it's second child of it's parent.
.resources .resource:first-of-type {
border-top: 1px solid #D9B310;
}
.resources .resource {
border-bottom: 1px solid #D9B310;
padding: 10px 0;
}
<div class="resources">
<h2 class="text-center">Ресурси</h2>
<div class="resource">
<h4>Минерали <span class="resource-quantity">3700</span></h4>
</div>
<div class="resource">
<h4>Газ <span class="resource-quantity">500</span></h4>
</div>
</div>
.resources .resource:first-of-type {
border-top: 1px solid #D9B310;
}
.resources .resource {
border-bottom: 1px solid #D9B310;
padding: 10px 0;
}
<div class="resources">
<h2 class="text-center">Ресурси</h2>
<div class="resource">
<h4>Минерали <span class="resource-quantity">3700</span></h4>
</div>
<div class="resource">
<h4>Газ <span class="resource-quantity">500</span></h4>
</div>
</div>
Related
<div>
<span class="brd-box">
<h3>Garages For</h3><p>Renault KWID</p>
</span
</div>
<style>
.brd-box {
border: 1px solid #ccc;
}
</style>
I want to put h3 and p in a box border with 1px so with span tag and I am unable to achieve it.
Span is display:inline by default. So change it to display:block
<div>
<span class="brd-box">
<h3>Garages For</h3><p>Renault KWID</p>
</span>
</div>
<style>
.brd-box {
display:block;
border: 1px solid #ccc;
}
</style>
Instead of giving the class brd-box to the span you instead should give it to the div
<div class="brd-box">
<h3>Garages For</h3>
<p>Renault KWID</p>
</div>
<style>
.brd-box{
border: 1px solid #ccc;
}
</style>
I have this structure:
<div class="as-twl-list-main">
<div class="as-twl-list-item">
</div>
<div class="as-twl-list-item">
</div>
<div class="as-twl-list-item">
</div>
</div>
and this scss:
.as-twl-list-item {
border-bottom: 1px solid $as-twl-line-c;
&:last-child:nth-child(even):nth-child(-1) {
border-bottom-color: transparent;
}
}
What I'm trying to do is to get the last child (if it even) and the prev sibling.
there is a way to do that?
Thank you!
For getting the last child which is even use this:
.as-twl-list-item:last-child:nth-child(even) {
border-bottom-color: transparent;
}
and for getting the element just before it use nth-last-child:
.as-twl-list-item:nth-last-child(2):nth-child(odd) {
border-bottom-color: transparent;
}
See demo below:
.as-twl-list-item {
border-bottom: 1px solid #ddd;
}
.as-twl-list-item:last-child:nth-child(even) {
border-bottom-color: transparent;
}
.as-twl-list-item:nth-last-child(2):nth-child(odd) {
border-bottom-color: transparent;
}
Last child even:
<div class="as-twl-list-main">
<div class="as-twl-list-item">1</div>
<div class="as-twl-list-item">2</div>
<div class="as-twl-list-item">3</div>
<div class="as-twl-list-item">4</div>
</div>
<br/>
Last child odd:
<div class="as-twl-list-main">
<div class="as-twl-list-item">1</div>
<div class="as-twl-list-item">2</div>
<div class="as-twl-list-item">3</div>
</div>
Hi I'm trying to find a way to skip the first element that are dynamically generated (div class="Title") within the (div class="MyList") class. I've tried with :first-child and :first-of-type but no luck. Basically, I'm trying to remove the double border for the first Title element. Your help would be greatly appreciated!
HTML
<div class="MyList">
<div class="Title">
<h3></h3>
</div>
<div class="List"></div>
<div class="List"></div>
<div class="List"></div>
<div class="List"></div>
<div class="Title">
<h3></h3>
</div>
<div class="List"></div>
<div class="List"></div>
</div>
CSS
.MyList > :first-child{
border-top:none;
}
.Title {
text-align: center;
border-left-width:15px;
border-bottom-width:5px;
border-top: 3px solid black;
padding-top: 1px;
}
.Title:before {
content: '';
border-top: 1px solid black;
display: block;
width: 100%;
}
.Title h3 { padding: 20px;}
Check out this fiddle: http://jsfiddle.net/j2QLY/
You need to also override the :before code you are applying to the Title element:
.MyList > :first-child {
border-top:none;
}
.MyList > :first-child:before {
border-top: none;
}
I want to remove the border-right for the last child using css. I'm using the html below:
<div class="dividers">
<div class="clone_container">
<img src="clone.png"/>
<a class="button-link">Clone</a>
</div>
<div class="delete">
<img src="delete.png"/>
<a class="button-link">Delete</a>
</div>
<div class="abort">
<img src="abort.png"/>
<a class="button-link">Abort</a>
</div>
<div class="pause">
<img src="pause.png"/>
<a class="button-link">Pause</a>
</div>
</div> //end of dividers div
and the css:
div.dividers a {
display: inline-block;
border-right: 1px solid #DCDCDC;
border-radius: 4px;
height: 22px;
}
div.dividers {
margin-right: -3px;
padding-right: 0px
}
div.dividers a:last-child { border-right: none; }
when i do a { border-right: none; } like shown above, all the borders are removed.
how can i fix this? anyone with any ideas??
The output i am looking for is:
Clone | Delete | Abort | Pause
Try
div.dividers > div:last-child > a { border-right: none; }
Your code div.dividers a:last-child means
Select all <a> such as
Are last child of its parent
Are descendants of a <div> with class dividers.
The code div.dividers > div:last-child > a { border-right: none; } means
Select all <a> such as
Are children of a div <div> which
Is the last child of its parent
Is a child of a <div> with class dividers.
You need to target last div in .dividers div:
div.dividers div:last-child a {
border-right: none;
}
Example
I have this html code:
<div class="productWarp">
<div class="clear"></div>
<div class="productLine" ></div>
<div class="clear"></div>
<div class="productLine" ></div>
</div>
css:
.productWarp .productLine {
background-color: #DFDDDD;
border-bottom: 1px solid #B7B7B7;
padding-right: 5px;
}
.productWarp .productLine:nth-of-type(2)
{
background-color: white;
border-bottom: 1px solid #B7B7B7;
padding-right: 5px;
}
This choosing the second child of productWarp(first productLine) and not the second productLine,so it acting Exactly as nth-child selector
<div class="productWarp">
<div class="clear"></div>
<div class="productLine" ></div>//this one is choose
<div class="clear"></div>
<div class="productLine" ></div>//this one should be choose
</div>
any idea what wrong here?
:nth-of-type() looks at an element's type, not its class. In this case, all your elements are of the type div, which is why :nth-of-type() works exactly the same as :nth-child().
If you have only two .productLine elements, use the following selector to style your second one instead:
.productWarp .productLine ~ .productLine
{
background-color: white;
border-bottom: 1px solid #B7B7B7;
padding-right: 5px;
}
Otherwise you'll just have to go by :nth-child() indices, in this case :nth-child(4), or override styles for subsequent .productLine elements by adding more rules repeating the ~ .productLine part as necessary.
This take in consideration the clearing div.
.productWarp div.productLine:nth-of-type(4n)