In css I know you can select elements beneath their parent with the > selector:
#myDiv > p {
line-height: 1;
}
Is it possible to do the same for elements with a certain set of classes beneath that element, eg:
#myDiv > .classA .classB {
line-height: 1;
}
So that any child element with classes .classA .classB will get the treatment?
I've tried this and it doesn't seem to be working, and am not sure if I'm going down the right path or if I'm close.
This is a limitation of CSS that you have to repeat your self by doing
#myDiv > .classA, #myDiv > .classB
as your selector. Most CSS preprocessors can make this less of a challenge to keep things DRY.
Yes, you can - but you have to follow the rules. A space character is also a descendant selector, and that's not what you want. If you want to select all descendants that have both classes, try:
#myDiv > .classA.classB {
line-height: 1;
}
Related
I was trying to create an effect when I hover over a list element and not the anchor tag. For example, doing this:
#wrapper ul.menu li:hover {
color: #ff0000;
}
This will not change my color because I have an anchor tag style nested deeper, so I tried this and it works:
#wrapper ul.menu li:hover a {
color: #ff0000;
}
but I'm not sure if it is valid CSS to select elements after pseudo classes.
Any number of pseudo-classes can appear in any part of a selector. You are given the freedom to style a sibling or a descendant or otherwise any element that isn't the one to which you're applying the pseudo-class, whatever that pseudo-class may be, according to your needs.
I have an unwieldy chunk of css that I am using to set the margin-top of the first child of an element. The first child can be any tag.
.comment-description p:first-child,
.comment-description ol:first-child,
.comment-description ul:first-child,
.comment-description pre:first-child,
.comment-description blockquote:first-child
{
margin-top:0px;
}
I'm sure that I can chop this down, but since I don't get to design too often, I can't remember a better way. Can I use something like:
.comment-description *:first-child
{
margin-top:0px;
}
Unfortunately this doesn't work.
You may be interested in:
.comment-description > :first-child {} - select only immediate children
or
.comment-description :first-child - select first child of all children elements
See:
http://jsfiddle.net/9VqsW/1/
To clarify things a little:
.element selector - selects all descendants that match selector. It doesn't matter if selector is a class, pseudo-class or ID.
.element > selector - selects only on the direct children that match selector
It looks like you want:
.comment-description > :first-child{
....
}
.comment-description :first-child
{
margin-top:0px;
}
Has the same effect as
.comment-description *:first-child
{
margin-top:0px;
}
Have a look here.
In CSS, is it possible to recursively select all :last-child from body?
Given this markup:
<body>
<div id="_1">
<div id="_2"></div>
</div>
<div id="_3">
<div id="_4">
<div id="_5"></div>
<div id="_6"></div>
</div>
</div>
</body>
I am looking for div no. 3, 4 and 6
Another way to put it is this:
body > :last-child,
body > :last-child > :last-child,
body > :last-child > :last-child > :last-child,
body > :last-child > :last-child > :last-child > :last-child {
/* My stuff here */
}
But obviously this is not a good approach.
No, unfortunately that's just about the only way to do it without modifying the HTML.
There has been at least one request for recursive versions of the :first-child and :last-child pseudo-classes, but it doesn't seem to have gained much favor. Notice it suggests nesting and repeating the pseudo-classes in the same way as in your question:
Currently, AFAIK, we can only match children up to some exact nesting level known in advance (3 in the example below):
.container > :first-child,
.container > :first-child > :first-child,
.container > :first-child > :first-child > :first-child {}
We cannot use just :first-child context selector since it would also select first children of blocks that are not first children themselves.
So we need a sort of recursive selector that matches not just first of last child, but recursively matches all first-most and last-most elements regardless of their nesting level.
body :last-child {
color:red;
}
body :not(:last-child) :last-child {
color:initial;
}
Any last-child element that's a descendant of one that's not a last-child will have the change reversed.
No need to chain all the way. It would be simply like this
div:last-child {
/* Your GREAT css */
}
Demo
Update: On that case, give the div2 a typical class and use :not() to push out of the selection
div:last-child:not(.nolist) {
border: 1px solid red;
}
Demo
I thought I had my CSS down fairly well but I cannot seem to figure out why this problem occurs. I must be doing something wrong.
So if I want to select multiple elements that are children to a div I could write:
#mydiv > input, label{
}
Am I correct? I thought this to be true until I realized that other inputs and labels in my site were inheriting these CSS properties even though they were not in the div called #mydiv. To fix the issue I had to use:
#mydiv > input, #mydiv > label {
}
But I am pretty sure that this is not the quickest way to do so. I tried checking the Selector Page on W3.org but they do not give an example for my situation.
What am I doing wrong?
Am I correct?
No. The grouping selector (comma) has the lowest precedence, so you cannot use it to select multiple elements that are children of a div using this selector:
#mydiv > input, label
The most concise selector is the one that you found on your own:
#mydiv > input, #mydiv > label
You can DRY things up a bit using nested rules in LESS or Sass, though that does introduce a dependency in your code and/or build process.
Your second snippet is the simplest way to do it with pure CSS. The comma , separates isolated CSS selectors, so that's why you needed to begin each with #mydiv for both selectors.
You could use something like LESS, which would allow nested rules. Non-germane example:
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
But you're probably better off with pure CSS.
Your second method is good
#mydiv > input, #mydiv > label {
}
If you wanted to somehow do this without using multiple selectors separated by a comma, you could use a class name for both your input and label elements
.your-class-name {
}
or if for some reason input and label were the only two types of child elements for #mydiv, then you could use the universal selector like this:
#mydiv > * {
}
I have to select all the elements of html ( from * ) except the children one specific div.
how can I make use it of :not of css3 ?
(*) - children of (#myDiv)
You can't do that, as the selector to find any child of #myDiv would be
#myDiv > *
But that's not a simple selector that could fit in :not().
Your best bet is to apply styles to * and override (or "revert") them in #myDiv > *:
* {
color: red;
}
#myDiv > * {
color: black;
}
jsFiddle preview
This should work:
:root, :not(#myDiv) > *
The first part there will match the root element. The second part will match anything with a parent as long as that parent is not #myDiv.