I have seen this character a number of times in CSS files but I have no idea how its used. Can anyone explain it to me and show how they are useful in making a page style easier?
It's a CSS child selector. P > SPAN means applying the style that follows to all SPAN tags that are children of a P tag.
Note that "child" means "immediate descendant", not just any descendant. P SPAN is a descendant selector, applying the style that follows to all SPAN tags that are children of a P tag or recursively children of any other tag that is a child/descendant of a P tag. P > SPAN only applies to SPAN tags that are children of a P tag.
p em
will match any <em> that is within a <p>. For instance, it would match the following <em>s:
<p><strong><em>foo</em></strong></p>
<p>Text <em>foo</em> bar</p>
On the other hand,
p > em
Will match only <em>s that are immediate children of <p>. So it will match:
<p>Text <em>foo</em> bar</p>
But not:
<p><strong><em>foo</em></strong></p>
this is known as a Child Combinator:
A child combinator selector was added
to be able to style the content of
elements contained within other
specified elements. For example,
suppose one wants to set white as the
color of hyperlinks inside of div tags
for a certain class because they have
a dark background. This can be
accomplished by using a period to
combine div with the class resources
and a greater-than sign as a
combinator to combine the pair with a,
as shown below:
div.resources > a{color: white;}
(from http://www.xml.com/pub/a/2003/06/18/css3-selectors.html)
E > F
Matches any F element that is a child of an element E.
more on http://www.w3.org/TR/CSS21/selector.html#child-selectors
Related
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 * {}
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
Is it possible to define css class behaves dependent to an other css class?
For example; when
a:hover
Then I want to set
p {background:#fff;}
Is this possible with pure css?
Edit: Assume that no nested relation exist.
If you mean you want all p to have that style when a:hover regardless of where they are in the DOM, then no, you can't do that. You'll need to use a script to apply the style (or some class containing that style) to the p elements when a receives a hover.
if you have a structure like this:
<a><p>...</p></a>
then this:
a:hover p {background: #fff;}
will work. However, block elements should not be placed inside inline elements (in this case, no <p> inside <a>
if your markup is valid, and looks like this:
<p><a>...</a></p>
then you could have
p:hover {background: #fff;}
but a descendant can't affect the parent css (unless you use javascript) while the opposite is true (parent css affects descendants)
I do not see why you would be limited to these restrictions with a littl creativity. if you use fixed positioning the descendant can overlap its parent. and still respond like a descendant.
If the <p> tag immediately follows the <a> tag then you could use the adjacent sibling selector e.g.
a:hover+p{
background:#fff;
}
This is supported in IE8+
What I want to do is something like:
#div_id > .some_class
{
}
I don't want to change the class everywhere. I only want to change the class if it in that particular div.
Is ther some other way to do that same thing?
You've already stumbled upon the answer yourself:
#div_id > .class {
/* CSS magic */
}
This selects .class if it is the direct descendant of #div_id. For all descendants regardless of depth, use the selector #div_id .class instead.
See also this JSFiddle.
Your question already contains the child combinator CSS selector and will target the elements with class .some_class that are children of the element with id div_id, so if you have only one <div> with an id of div_id then it will only target the child elements with the class some_class. So it should work as already expected, except in IE6 of course which does not support that selector natively.
If you want to select grandchildren, use the descendant combinator.
Child combinator body > p
Descendant combinator body p
You essentially have the answer there. If you want to modify all classes with in a div then the selector would be div#id .this_class. If it's just one instance of the class inside the div (say you have a div called 'test' with three divs with a class of 'test_class' then you could either use the :nth-child() selector or the :first-of-type selector.
Your code looks fine to me. Note that the > operator will only affect the children of the DIV not any lower decendants (i.e. grandchildren). Remove the > to affect everything inside the DIV with the class .some_class.
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 { ... }