ok I know how to do both these things separately:
#elemID { } /* selects only one element */
#elemID * { } /* selects all its children elements but not the element itself */
And I know I can do it like this:
#elemID, #elemID * { }
But is there a way to avoid this repeating ?
No, there is nothing shorter than that.
Note that if you really only want all the children of #elemID, and not all the descendants, you need to use the child combinator:
#elemID, #elemID > *
And as Šime Vidas has commented, some properties like color are automatically inherited by descendant elements by default. If you're trying to give text color to #elemID, you should not need to apply it explicitly and recursively to the elements inside it. See the SitePoint Reference on inheritance in CSS for details.
No. But you could select its parent if an equivalent selector exists:
.parent * { ... }
Related
I need to override the height of all the child of a parent except a child and his child's. how can i do that ?
I use the id of the parent and the not option #parent *:not(here i want to select a child which is a parent of another).
Please can anyone help me thanks a lot <3.
CSS doesn't have parent selectors, so there's no way to say :not(any child which is itself a parent) automatically unfortunately. I believe you'll have to apply a class to every child which is itself a parent. And then you'll need a second selector to catch the grandchild. So:
#parent > *:not(.haschildren),
#parent > *:not(.haschildren) > * {
}
Or just give the same class to every tag involved. But this is probably more typing overall than just using two selectors:
#parent *:not(.tagswewanttoignore) {
}
I know you can select the elements if the attribute exists
[data-value] { /* rules */ }
Or that its values starts with some val
[data-value^="foo"] { /* rules */ }
But, can I check if any elements contain contains a prefixed attribute?
[^data-] { /* something like it? /*}
This question came when I was trying to query all attributes of the page that has a prefixed aria atrittube. eg. aria-hidden, aria-live...
Unfortunately it is not possible to do what you want with just CSS selectors, you would have to specify each attribute that you want to include. For example:
[aria-hidden], [aria-live]
{
}
It would be possible however to do something with javascript, so you may want to look into that if it's an option for you.
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 {
& > * {
}
}
is this a legitimate use of * selector, and if so are there references to how browsers support this? it seems to work in all browsers I have test, but I haven't used older ones or IE
body * {
float: left;
}
Yes it is, but you should avoid the use of it. You can make it more clear. But if you really want all elements to float left it is a good way to do it. But why do you want this?
All browsers support this, source: http://www.quirksmode.org/css/contents.html#t10
Yes it is! The asterisk is a wildcard, it will select all elements within that DOM element you set it to.
For example, if I you want to apply an attribute to your whole site:
* {
attribute: value;
}
Or as you did it with a special DOM element!
element * {
attribute: value;
}
You could also use something like:
* {
attribute: value;
}
* * { ... }
* * * { ... }
* div * { ... }
Which is a bit difficult... like a recursion.
Yes, your example is a legitimate, if not heavy-handed use of the * selector. This will cause every child element of the body element to be floated left.
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).