How can I select all child elements starting from n-th element? For example I have a div with 7 spans and I need to select all spans starting with 3-rd element, so 4,5,6,7 should be selected.
div>span:nth-child(2)~span should do the trick. The ~ General Sibling Combinator selects all following elements. The spec is at http://www.w3.org/TR/css3-selectors/#general-sibling-combinators
CSS2.1 selector
span + span + span + span {
/* matching a span that has at least 3 siblings before it */
}
CSS3 selector
span:nth-child(n+4) {
/* matching from 4th span on */
}
You can use
div:nth-child(n+3) {
// your style here
}
However, this does not specifically select elements 3-7. Instead, it excludes the first two elements. So it would also select elements 8,9, ...
Related
This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 7 years ago.
for example for this code: (I know about star but not '> *')
.row > * {
float: right;
}
or this one:
.row.uniform > * > :first-child {
margin-top: 0;
}
The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first.
It selects all the elements where the parent is the one infront of > selector.
The * selects all elements, the .row > selects all elements where the parent is a .row element.
See the specifications.
The * selector is a wild card selector so will select all elements.
The > selector says "Only the next element of what you specify"
So > * will all select the next element no matter what it is.
The > selector in CSS is used to select child elements.
.row > * will style ALL elements within the parent class row.
">" means direct children elements. So that it will select all direct children of "row" elements.
I'm trying to select a specific and direct child of a specific and direct child of a div(I don't know how else to say that). However, in both cases, the elements could be anything so I need to use the "*" universal symbol to select these elements.
That may have been clear as mud, here is what I have:
.some-div>*:nth-child(2)>*:nth-child(1){
background-color: #d3fba9;
}
.some-div>*:nth-child(2)>*:nth-child(2){
background-color: #d3ffe9;
}
.some-div>*:nth-child(2)>*:nth-child(3){
background-color: #d3fac9;
}
As you can see I need to select the 1-3rd children of the 2nd child of a div, and apply style to them. Is it possible to do this?
Yes. The asterisk * is redundant since you have some specifier already in place for that particular element (the child and grandchild of .some-div.
.some-div > :nth-child(2) > :nth-child(1) - Selects the 1st child of the 2nd child of .some-div.
.some-div > :nth-child(2) > :nth-child(2) - Selects the 2nd child of the 2nd child of .some-div.
.some-div > :nth-child(2) > :nth-child(3) - Selects the 3rd child of the 2nd child of .some-div.
If I have a table with two columns, how do I specify a padding or any other css so that it is applied just for the first column of <td>s. Also how do I style an n-th column similarly?
You could use the n-th child selector.
to target the nth element you could then use:
td:nth-child(n) {
/* your stuff here */
}
(where n starts at 1)
The :nth-child() and :nth-of-type() pseudo-classes allows you to select elements with a formula.
The syntax is :nth-child(an+b), where you replace a and b by numbers of your choice.
For instance, :nth-child(3n+1) selects the 1st, 4th, 7th etc. child.
td:nth-child(3n+1) {
/* your stuff here */
}
:nth-of-type() works the same, except that it only considers element of the given type ( in the example).
For more information about nth-child
https://developer.mozilla.org/es/docs/Web/CSS/:nth-child
If you've to support IE7, a more compatible solution is:
/* only the cells with no cell before (aka the first one) */
td {
padding-left: 20px;
}
/* only the cells with at least one cell before (aka all except the first one) */
td + td {
padding-left: 0;
}
Also works fine with li; general sibling selector ~ may be more suitable with mixed elements like a heading h1 followed by paragraphs AND a subheading and then again other paragraphs.
This should help. Its CSS3 :first-child where you should say that the first tr of the table you would like to style. http://reference.sitepoint.com/css/pseudoclass-firstchild
To select the first column of a table you can use this syntax
tr td:nth-child(1n + 2){
padding-left: 10px;
}
I'm trying to apply CSS to any immediate child of a parent container element. How do I use CSS's descendant < selector to select any immediate child regardless of type (div / span / etc).
I assume you mean the child selector. It's >, not <.
.parent > *
That will select any element. You can of course use any other selector as the child (an element, class, id, etc.)
If you are in SCSS then
.parent {
& > * {
}
}
My HTML:
<p>Doggies</p>
<p class="green_guys">Froggies</p>
<p>Cupcakes</p>
<p>Piggies</p>
An all inclusive sibling selector (as I wish it to be), when used to select green_guys' siblings, would select the doggies cupcakes and piggies.
Other Selectors:
The + selector (a.k.a. adjacent sibling selector) would only select the cupcakes:
.green_guys + p {
/* selects the <p> element that immediately follows .green_guys */
}
The ~ selector (a.k.a. general sibling selector) would only select the cupcakes, and piggies:
.green_guys ~ p {
/* selects all <p> elements that follow .green_guys */
}
There is no sibling combinator that looks backward or around, only the adjacent and general sibling combinators that look forward.
The best you can do is determine a way to limit selection only to these p elements with the same parent, and then select the p children that are :not(.green_guys). If the parent element has an ID of #parent, for example, you can use this selector:
#parent > p:not(.green_guys) {
/* selects all <p> children of #parent that are not .green_guys */
}
However the above will still match your p elements even if none of them have the class. It is currently not possible to select the siblings of an element only given the existence of said element (which is the purpose of a sibling combinator — to establish a relationship between two sibling elements).
Selectors 4's :has() will hopefully rectify this without the need for a preceding-sibling combinator, resulting in the following solution:
p:has(~ .green_guys), .green_guys ~ p {
/* selects all <p> elements that are siblings of .green_guys */
}
This will not match anything if none of the children of the parent element have the class.
Not that I am aware of. There isn't a siblings selector either.
This might work, though:
#parent_of_green_guys > p:not(.green_guys) {
foo: bar;
}
Or if you aren't looking for ps with class attributes:
#parent_of_green_guys > p:not([class]) {
foo: bar;
}
My scenario was a little different but I wanted to select siblings of an input element to display one while it was active and another if it was left invalid.
My html was like this and I was unable to select the invalid text.
<input name="importantAnswer">
<div class="help-text"></div>
<div class="invalid-text"></div>
I was able to get around it by embedding the siblings in an adjacent one and using child selectors on that.
<input name="importantAnswer">
<div class="messages">
<div class="help-text"></div>
<div class="invalid-text"></div>
</div>
.help-text, .invalid-text {
visibility:hidden;
}
.input:active +.messages > .help-text {
visibility:visible;
}
.input.invalid:visited +.messages > .invalid-text {
visibility:visible;
}
And it worked.
I actually found 3 ways to do this:
Solution 1
.parent > p:not(.green_guys) {
text-decoration: line-through; /* or whatever you like */
}
Demo:
https://jsbin.com/cafipun/edit?html,css,output
PROS: quick and easy.
CONS: you need to know the parent selector (so that's not a super portable solution).
Solution 2
p ~ p:not(.green_guys),
p:first-child:not(.green_guys) {
text-decoration: line-through; /* or whatever you like */
}
Demo:
https://jsbin.com/seripuditu/edit?html,css,output
PROS: there is no need to know the parent selector (it can be very good to be used in generic cases).
CONS: it risks to be too generic (be careful, for example, if you have other p around your HTML!).
Solution 3
Small variant of the Solution 2 (to avoid the CONS). In this case you specify the sibling selector to get a more specific context.
p.siblings ~ p:not(.green_guys),
p.siblings:first-child:not(.green_guys) {
text-decoration: line-through; /* or whatever you like */
}
Demo:
https://jsbin.com/hakasek/edit?html,css,output
PROS: it is a portable solution, there is no need to know the parent selector (it can be very good in generic cases) and there is no worry to have conflict with other elements.
CONS: all siblings have to be well defined (with a class or an attribute for example).