How can I make a CSS selector match all elements in the subtree of an element marked with a certain class?
I'm imagining CSS like the following (where the :subtree part is me making something up).
.diagram:subtree
{
...
}
When I write HTML like the following, the <div> and every element inside of it should be selected.
<div class="diagram">
...
</div>
Simply use the descendant selector (space):
.diagram * { … }
This selects every element beneath any element(s) that have the diagram class applied.
To match both the div itself AND its descendants, use grouping:
.diagram, .diagram * { … }
Quoting the spec:
At times, authors may want selectors to match an element that is the descendant of another element in the document tree (e.g., "Match those EM elements that are contained by an H1 element"). Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by white space. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.
.diagram, .diagram *
This will select the div .diagram. The space is the descendant selector, and * is all elements.
EDIT: I thought your question originally said "including the element" hence the .diagram,, but you can simply remove that if desired.
simply use this code for it .diagram * {}
Related
I have a span with [display:-webkit-box;] in an ant-design-vue-table item. When I try to use [opacity:0.3] in "tr", it's looks ok. But when I try to use [opacity:0.3] in the "-webkit-box 's father box", the opacity doesn't work. And when I don't use the [display:-webkit-box;] it's all ok.
I'm confused if I did something wrong?
here are the photos:
But when I try to use [opacity:0.3] in the "-webkit-box 's father box", the opacity doesn't work.
When I try to use [opacity:0.3] in "tr", it's looks ok
And when I don't use the [display:-webkit-box;] it's all ok.
You have a problem in the way the first selector is expressed.
[data-v-39bbd7fb] .row-gray .gray-item
A couple of points:
.row-gray is nowhere that I can see in that element. It should not be
part of the selector
remember that a space character has significance in a CSS selector. See for example MDN:
The descendant combinator — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.
Therefore try this:
[data-v-39bbd7fb].gray-item - remember, no spaces as the attribute and the class are within the same element tag.
I know that the Asterisk match all items inside an element. Is there any selector, that includes the parent element too?
Sample HTML
<p>
foobar
<span>
foobar
</span>
</p>
Sample CSS
p * {
background-color:aqua;
}
Now only the span elements inside the p gets the background-color. Is there a selector which matches the p tag and all tags inside the p tag? Or do i still have to use
p, p * {
background-color:aqua;
}
NOTE The background-color is only dummy content.
You will have to use p, p *, although depending on the property you're applying, if it is inherited by default it should be enough to simply apply it to p and have its descendants inherit it instead. If you explicitly apply it to all the descendants, you may break inheritance chains unnecessarily.
Considering the nature of a background, I don't see much of a point in applying a background color to all of the descendants of p along with the p itself.
Is there any selector, that includes the parent element too?
No. See Is there a CSS parent selector? for a more detailed explanation.
It has been suggested with css level 4, and rejected : Complex CSS selector for parent of active child
I have an example of what I'm trying to ask.
I use this kind of format often. I'd expect to be able to select that first div with fieldset div:first-child { } but it seems that it's only grabbed by the 2nd child selector. I would expect "field 1" to be red and not blue. It makes more sense semantically (to me at least) to say "style the first div in the fieldset like so" instead of saying the 2nd.
Why is this happening and is there a way to achieve the effect I want (to be able to call div:first-child)?
The :nth-child selector ignores the elements type. div:nth-child(2) selects a <div> which is a second child.
If you want to select the first div, use the :nth-of-type(1) or :first-of-type selector.
Demo: http://jsfiddle.net/Z3Bcq/1/
In this case, the <legend> preceding the first div is the actual :first-child of their shared parent. You could consider using the :nth-of-type selector.
Fiddle here
Here is the explanation how :nth-child selector works:
This pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements. The pseudo-class accepts an argument, N, which can be a keyword, a number, or a number expression of the form an+b. For more information, see Understanding :nth-child Pseudo-class Expressions.
If N is a number or a number expression, :nth-child(N) matches elements that are preceded by N-1 siblings in the document tree.
The following example selectors are equivalent, and will match odd-numbered table rows:
tr:nth-child(2n+1) {
⋮ declarations
}
tr:nth-child(odd) {
⋮ declarations
}
This example selector will match the first three rows of any table:
tr:nth-child(-n+3) {
⋮ declarations
}
This example selector will match any paragraph that’s the first child element of its parent element:
p:nth-child(1) {
⋮ declarations
}
This is, of course, equivalent to the selector p:first-child.
Note: For more details on selector please see the link: http://reference.sitepoint.com/css/pseudoclass-nthchild
What is the correct terminology when referring to a CSS declaration containing CSS combinators, such as:
.myClass div { ... }
Here I'm using a declaration which will apply styles to all div elements inside an element with the class myClass.
But that is irrelevant. I'm interested in knowing the correct terminology for a declaration which mentions parent selectors.
But what is the correct terminology for this sort of declaration?
They're called descendant selectors:
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors
A descendant selector is made up of two or more selectors separated by
white space. A descendant selector of the form "A B" matches when an
element B is an arbitrary descendant of some ancestor element A.
They are called Descendant Selectors, see here for more information and other terms
Just in case the W3 site ever goes down ;) here are the important parts:
At times, authors may want selectors to match an element that is the
descendant of another element in the document tree (e.g., "Match those
EM elements that are contained by an H1 element").
Descendant selectors express such a relationship in a pattern. A descendant
selector is made up of two or more selectors separated by white space.
A descendant selector of the form "A B" matches when an element B is
an arbitrary descendant of some ancestor element A.
Example (also quoted from the site linked above):
For example, consider the following rules:
h1 { color: red }
em { color: red }
Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as:
<H1>This headline is <EM>very</EM> important</H1>
We address this case by supplementing the previous rules with a rule that sets the text color to blue whenever an EM occurs anywhere within an H1:
h1 { color: red }
em { color: red }
h1 em { color: blue }
While debugging some css i noticed there is a difference between this order of declaration. The first caused headings inside anchors to display inline as desired, the second seems not to:
1/ a.aname { display:inline; margin:0px;}
2/ .aname a { display:inline; margin:0px;}
<a name="download" class="aname"><h2>Download</h2></a>
I have mostly been using the second form to apply class styles.
What is the difference in how these are applied, and are there any guide rules when to use each? (to avoid the css-puzzlement which arises when it's done wrong)
Basic solution from answers:
Use "direct selection" elementtype.class{} or elementtype#id{} to apply style to elements directly. For styling which is intended to affect once each time the rule is used eg. a margin change, a display change, a noninheriting font change. Direct selection does not inherit to child elements, it is applied to parent element only.
Use "descendant selection" .class elementtype{} or #id elementtype to apply style to type descendants/children of the named or classed element. For styling which is intended to change appearance of elementtypes under an element/within a section of page where it is applied eg. inheriting font changes to text sections, inheriting format changes to paragraphs or list elements. Descendant selection applies to all child elements but never the parent.
NBself: learn about other selectors too asap ;)
The difference is the space between them, which is the descendant combinator in CSS.
The selector a.aname will match an anchor element with the class aname while the .aname a will match an anchor element that is a descendant of an element with the class aname:
<a class="aname">This matches the first rule</a>
<span class="aname"><a>This matches the second rule</a></span>
CSS combinators:
space = descendant combinator
> = child combinator (direct descendant)
+ = adjacent sibling combinator
The Selectutorial gives a pretty good overview or selectors and combinators.
If you use selectors where you can put identifiers together without combinators between them, the order doesn't matter. Example:
#id.class { ... }
.class#id { ... }