Here is the html I am working with. I want to write a css selector for the Item with text "DESIRED ELEMENT":
<div class="TopDiv">
<div class="container">
<div class="row">
<div class="span2">
<strong>Text1</strong>
</div>
<div class="span3">Text2</div>
<div class="span2">
<strong>Text3</strong>
</div>
<div class="span3">DESIRED ELEMENT</div>
</div>
<div class="row">
<div class="span2">
<strong>Text4</strong>
</div>
<div class="span3">Text5</div>
<div class="span2">
<strong>Text6</strong>
</div>
<div class="span3">
<div>Text7</div>
<div>Text8</div>
<div>Text9</div>
<div>Text10</div>
<div>Text11</div>
<div>Text12</div>
<div>Text13</div>
</div>
</div>
</div>
</div>
I am having a lot of trouble getting to the div that that I want because I don't completely understand the nth-child of type this or that or getting a child of a child.
I just want something that is nice and short that will retrieve the 4th div tag child of the first row after container.
The selector depends on if that is the order your elements are always in?
Anyway, you could use:
.row:first-child > .span3:last-child
This will select the last element with the class .span3 which is a child of the first .row.
jsFiddle here.
If you want to support last-child in IE8 and before, there is always Selectivizr.
One selector that should work in IE7/IE8 could be .row:first-child > .span3 ~ div.span3.
Only use this though if there are exactly two elements inside a row with the .span3 class.
jsFiddle here.
If it's not the last, but always the fourth, use .row:first-child > div:nth-child(4).
jsFiddle here.
the 4th div tag child of the first row after container.
The css translation of that will be:
after container
.container >
of the first row
.row:first-child >
the 4th div tag child
div:nth-child(4)
so in one line:
.container > .row:first-child > div:nth-child(4)
find the container class and in childs find the first row class and inside find the 4th div tag.
Related
So basically I've got a setup that spits out the code in the following fashion..
<div class="parent">
<div class="subparent">
<div class="TARGETCLASS"></div>
</div>
<div class="subparent">
<div class="TARGETCLASS"></div>
</div>
</div> //close for the parent class
Now what I'm trying to do is to style "TARGETCLASS" that comes above one way and the "TARGETCLASS" that comes second in another way. I tried n-th child, but unable to achieve the result I'm looking for. There's no way to add additional classes or ID to the existing "TARGETCLASS" class. Otherwise I wouldn't be posting this question :)
Also, the "subparent" class also is same. for both the targetclass classes. That's the issue
Thanks in advance for taking your time to answer this question for me.
Cheers!
Looks like you've got some mal-formed tags in your html. And nth-child should work just fine. Also, make sure you place the nth-child selector on the subparent class, and not TARGETCLASS. It's common to mis-place the child selector. Try this:
<div class="parent">
<div class="subparent">
<div class="TARGETCLASS">
first-child
</div>
</div>
<div class="subparent">
<div class="TARGETCLASS">
second-child
</div>
</div>
</div>
<style>
.parent .subparent .TARGETCLASS {
background-color:#f00;
}
.parent .subparent:nth-child(1) .TARGETCLASS {
background-color:#0f0;
}
</style>
fiddle: https://jsfiddle.net/8ejxokuj/
I would use nth-of-type selector like so:
.parent{}
.parent > .subparent {} //targets both subparents
.parent > .subparent:nth-of-type(2) {} //targets the second subparent
.parent > .subparent:nth-of-type(2) > .TARGETCLASS{} //targets the child of the second subparent
The nth-of-type() selector enables you to style a specific element amongst a series, in this case we targeted the second .subparent then specified the child we needed.
I hope this helps!
It seems, it is working by the nth child.
it is about how childrens are called. Not like "Ask parent to find nth child, but ask child, how far is he from parent"
.parent .subparent:nth-child(1) {background: #FEE; color:RED;}
.parent .subparent:nth-child(2) {background: #EEF; color:blue;}
<div class="parent">
<div class="subparent">
<div class="TARGETCLASS">aaa</div>
</div>
<div class="subparent">
<div class="TARGETCLASS">bbb</div>
</div>
//close for the parent class
</div>
I'm currently working with a third party JS library that inserts content areas within the page/DOM, the library is Sir Trevor.
Now I wish to apply some custom CSS rules, for example:
.st-block:before {
#include roundedIcon(38px, $colorX, $colorY);
content: counter(mylistCounter, decimal);
counter-increment: mylistCounter;
margin-right: $margin-variable;
}
now this works great and a number is put before my divs with the .st-block class. However a DIV with this class can and some times does contain a child div with the same class, like so:
<div class="content">
<div id="st-block-16" class="st-block st-icon--add st-item-ready" data-type="listicle" data-instance="st-editor-8">
<!-- here's the child... grrr!!! -->
<div id="st-block-17" class="st-block st-icon--add st-item-ready" data-type="listicle" data-instance="st-editor-8">
Child Div Here...
</div>
</div>
<div id="st-block-18" class="st-block st-icon--add st-item-ready" data-type="listicle" data-instance="st-editor-8">
No Child Div
</div>
<div id="st-block-19" class="st-block st-icon--add st-item-ready" data-type="listicle" data-instance="st-editor-8">
No Child Div
</div>
</div>
How can I amend my CSS/SASS class to prevent the child/nested div with the same class being affected (in the example above the one with ID id="st-block-17")? PLEASE NOTE that I have no control over the alocation of IDs
Select only the classes which are only one level deeper then the div with class="content"
.content > .st-block
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;}