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;
}
Related
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>
<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 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 the following HTML structure:
<div id="ctr__Wrapper" class="wrapper">
<div id="ctr" class="control clickable">
<img src="logo.png">
</div>
</div>
And the following CSS for this:
.control
{
border: 1px solid #000;
background-color: #666;
padding: 20px;
}
.control:active
{
background-color: #bbb;
}
When I click on the element "ctr", I see the background color changing, but when I click on the image itself, it doesn't. This works fine in Firefox, but not in IE8. Is there something I can do to solve this in CSS.
The working example can be seen here:
http://jsfiddle.net/miljenko/DNMPd/
You could use a background image instead of a real image.
html:
<div id="ctr__Wrapper" class="wrapper">
<div id="ctr" class="control clickable">
</div>
</div>
css:
.control
{
border: 1px solid #000;
background-color: #666;
height: 40+height-of-logopx;
background-image:url(logo.png); background-repeat:no-repeat;
background-position:20px 20px;
}
.control:active
{
background-color: #bbb;
}
because < ie9 don't support :active on anything other than anchor elements. here's your fiddle, that should work in ie8 http://jsfiddle.net/jalbertbowdenii/DNMPd/12/
Example:
<style> div.Style1 div img { border: 3px red solid } </style>
...
<div class="Style1" id="divMain">
<img src="http://someurl.com/someimg.jpg" /> <!--WON'T be styled-->
<div id="divSub">
<img src="http://someurl.com/someimg.jpg" /> <!--WILL be styled-->
</div> <!--End of divSub-->
</div> <!--End of divMain-->
Yes. This CSS:
div.Style1 div img {
border: 3px red solid;
}
says: apply border: 3px red solid; to all img elements within a div element, which are in turn in in another div that has Style1 as a class.
Here's a jsfiddle to demonstrate:
http://jsfiddle.net/WZ3rk/
Try this, it selects only images that are children of a div that are themselves children of the element with class Style1.
.Style1 > div > img {
border: 3px red solid
}
Yes, it is possible - try it out. Although I would use
div.Style1 div.divSub img { ... }