I have something like this:
<div id="someID">
<div class="text">
-----other html tags
</div>
<div class="text">
-----other html tags
</div>
<div class="text">
-----other html tags
</div>
</div>
And some CSS for the text div. It is possible to set different CSS for the second div with the class of text?
You can easily do with with nth-child:
#someID .text:nth-child(2) {
background:red;
}
Demo: http://jsfiddle.net/P6FKf/
You can use the pseudo selector nth-child i.e div.text:nth-child(2)
Related
I have this html code:
<div class="form-group well">
<p>...</p>
<hr>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
</div>
And i want to set a style using css3 to second child that has select-skill class, but i cant use .select-skill:nth-child(2), It doesn't work.
I know the solution is to remove <p>...</p><h1> or move select-skill to a new parent.
Is there any solution to select this element without adding any code of html?
JSFiddle
You can use this:
.select-skill:nth-of-type(2){
background:red;
}
Or if there are more in different div's, you can do:
.form-group .select-skill:nth-of-type(2){
/*styles*/
}
instead.
I have this:
<div class="block3">
<div class="surround">
<div class="s_title">
<h3>Title</h3>
</div>
<div class="block_content">
<div class="content"> </div>
</div>
</div>
</div>
In my example I can't add content directly in HTML (blocks rendered by default in PHP), so I need to add in CSS.
The hard part of this is that I need to add text only in block3 element, after <h3> (.s_title:after will affect all s_title, so it will not work for me.)
Is there any way to do this?
Just add .block3 in front of your selector like how you would limit selection of any other element to some container element:
.block3 .s_title:after
I have the following HTML:
<div class="row">
<p> Text </p>
</div>
<div class="row">
<p> Text </p>
<p> Text </p>
</div>
I want to apply different styles to all elements that are an only child in the row. I know I can do this for the para as below:
.row p:only-child{
//apply your styles
}
My question is simple: Is there any shorthand way to apply the ::only-child styling to all elements in the row parent (e.g. other divs), or do I have to mark it up endlessly as:
.row .class1:only-child{
//apply your styles
}
.row class2:only-child{
//apply your styles
}
There are two different levels of this:
.row *:only-child
Selects all children of .row that are the only child, where as
.row > *:only:child
Selects all the direct children of .row that are the only child. Note that you don't actually need the * as it will be implied if you just use the :only-child selector. Which would make your selector look like .row > :only-child.
So, in the following example:
<div class="row">
<p id="p1">Text goes here</p>
</div>
<div class="row">
<p id="p2"><span id="span1">Text</span></p>
<p id="p3">More text is here</p>
</div>
The first selector will select #p1 and #span1, where as the second will only select #p1
you could do
.row .class1:only-child, .row.class2:only-child{
//apply your styles
}
I am using the following CSS to try and remove the left-border on the first child div of any element with the class called, "tblRow"
.tblRow div:first-child{
border-left: none;
}
<div class="tbl">
<div class="tblRow">
<div class="tblCell">Lower limit QTY</div>
<div class="tblCell">Upper Limit</div>
<div class="tblCell">Discount</div>
</div>
<div class="tblRow">
<div class="tblCell">1</div>
<div class="tblCell">5</div>
<div class="tblCell">25%</div>
</div>
</div>
This only removes the left-border from the first child div in the first row. It does not remove it in the second row. Any ideas?
I generally only use the :first-child and :nth-child psuedo selectors when I have little or no control over the elements or they are populated dynamically where I cannot rely on an order. Additionally, since :nth-child is CSS3, you can't rely on complete browser compatibility. If you can do without this psuedo selector, my advise is to create a secondary class for this purpose.
.tblCell.firstCell{
border-left: none;
}
<div class="tbl">
<div class="tblRow">
<div class="tblCell firstCell">Lower limit QTY</div>
<div class="tblCell">Upper Limit</div>
<div class="tblCell">Discount</div>
</div>
<div class="tblRow">
<div class="tblCell firstCell">1</div>
<div class="tblCell">5</div>
<div class="tblCell">25%</div>
</div>
</div>
It seems to work on the fiddle, so you probably have a (hidden) text node somewhere there. Therefore I suggest using .tblRow div:first-of-type { ... }, if possible from browser support point-of-view.
I would like to change the style of all the entries following a certain div. See example. Is this possible with child selectors? Thanks!
<div class="wrapper">
<div class="entry">content</div>
<div class="entry">content</div>
<div class="CHANGE">content</div>
<div class="entry">content</div>
<div class="entry">content</div>
</div>
This selector :
div.CHANGE ~ div {your rules;}
For elements directly under div.wrapper.
div.wrapper > div {your rules;}