msub > *:first-child:after, msub > * + *:before {
...
}
This is a code snippet from a css file I'm trying to understand.
msub is the element.
> This, greater than, applies to elements that is a direct child of msub
Do this for all elements of this type
:first-child Do this for all first children of msub
Why are they doing the > which is first child and :first-child which is first child?
> means "All children" not "first child".
:first-child means "The first child of its parent" not "The first child of the selector before the previous combinator"
<msub>
<a>
<b></b>
</a>
<c></c>
</msub>
msub *:first-child would select a and b because they are both the first child of their parent and are both descendants of msub.
msub > * would select a and c because they are both children of msub
msub > *:first-child selects only a.
msub - the element
> - target direct children of the parent element (not children of children)
* - get all child elements
:first-child - get first child element only
CSS works through selectors backwards so:
Get the first-child from all elements that are direct descendants of the parent msub.
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.
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, ...
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 {
& > * {
}
}
In the IUI css file, they use the following selectors:
body > *:not(.toolbar)
body > *[selected="true"]
What does the >, *:not() and *[] mean?
Thanks.
> means "is a child element of". So body > *:not(.toolbar) matches *:not(.toolbar) that is a child of body.
*:not(.toolbar) matches any element that does not have the class .toolbar.
*[selected="true"] matches any element with the selected attribute equal to true.
Keep in mind that the last two (*:not() and *[] are part of the CSS3 spec and you usually can't rely on them for cross-browser CSS compatibility. They are, however, fully supported in WebKit which is what the iPhone (and consequently iUI) use.
> means a direct child
* is a universal selector (everything)
:not() means anything except what's in the parentheses
*[] means anything that matches what's in the brackets
In your case:
body > *:not(.toolbar) // means any element immediately under the body tag that isn't of class .toolbar
body > *[selected="true"] // means any element immediately under the body tag where the selected attribute is "true"
> and * are defined in the CSS 2.1 specification. The :not pseudo class and the [] selector are defined in the CSS 3 specification.
See: http://www.w3.org/TR/CSS21/selector.html and http://www.w3.org/TR/css3-selectors/ for more info.
> - Child selector
I.e.
div > p > b {
font-size:100px;
}
This will select all b tags inside p tags inside div tags.
:not(..) - not selector
Matches any element on the page that does not meet the criteria in the parenthesis of the not statement. i.e.
div:not(.toolbar)
Will match any div that does not have the class toolbar
[attr='val'] - attribute selector
This matches any element where the attribute matches the specified value. Example if you want to make all checked check boxes red.
input[checkec='true'] {
background-color:red;
}
You should Google CSS 2.1 selectors for more information.
means child element
.cont > div {
color: #fff;
}
This would be:
<div class="cont">
<!-- NOTE: THIS NOTE IS TO TELL YOU WHICH IT AFFECTS
It only affects the below div. Not the p.
so "jabberwocky" text would be white, but "lorem ipsum" text in the p, would be the default font color. -->
<div>jabberwocky</div>
<p>lorem ipsum</p>
</div>