This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a CSS parent selector?
I'm trying to style a paragraph with a class of "long-sentence" which contains a span with a class of "background-fill". The target for styling must be the paragraph and not the span.
Therefore, this solution is inappropriate as it targets the span:
p.long-sentence span[class="background-fill"]
This selector appears perfect, however it targets a span with an attribute of "background-fill" and not a class:
p.long-sentence[span="background-fill"]
Can it be done? Or is this too stringent a criteria for a selector that has multiple variables?
This needs to be used CSS selectors 4.
For example, the following selector represents a list item LI unique
child of an ordered list OL:
OL > LI:only-child
However the following one represents an ordered list OL having a
unique child, that child being a LI:
$OL > LI:only-child
The structures represented by these two selectors are the same, but
the subjects of the selectors are not.
Form: http://www.w3.org/TR/2011/WD-selectors4-20110929/#subject
But there is no browser support CSS selectors 4 now. So you need to use JavaScript.
jQuery:
$("p.long-sentence:has(span.background-fill)").addClass("otherClass");
Related
This question already has answers here:
Multiple descendant children selector with css [duplicate]
(3 answers)
Closed 3 years ago.
Codepen example is here.
Question. How do I paint yellow all inputs that are NOT descendants of div.b?
My attempt paints all three elements yellow:
:not(.b) input.myInp {background:yellow}
Thanks!
:not(.b) > div > p input.myInp {background:yellow}
You need to make the selector specific enough that it does not match with the parent .a element.
Your selector is not working because you're targeting any element that does not have the class .b but has an <input> descendant, and since the input has two ancestor elements which don't have this class the rule applies to them as well.
You should just specify that you're referring to the container's themselves by including the parent in your selector:
div.a > :not(.b) input.myInp {background:yellow}
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Matching the first/nth element of a certain type in the entire document
(1 answer)
Closed 4 years ago.
I'm looking for an nth-of-type descendant selector.
I have a class .class-name present a total of 7 times in my DOM tree.
How do I select the 3rd iteration or 4th iteration of the said class?
(the said class has different elements as parents (with different classes applied to them)
I tried this code and it doesn't work:
(because nth-of-type refers to the direct parent and I want it to work for the BODY element, which is an ancestor)
.class-name:nth-of-type(3) {margin-top: -215px;}
.class-name:nth-of-type(4) {margin-top: 34px;}
.class-name:nth-of-type(5) {margin-top: -115px;}
.class-name:nth-of-type(6) {margin-top: 455px;}
.class-name:nth-of-type(7) {margin-top: 545px;}
(The whole reason for using the said class was to be able to select the N-th iteration of it throughout the DOM tree, to avoid the hastle of targeting each ancestor using more complicated selector rules)
P.S. This is a more clear example than the issue posted here (Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?).
It's related, but not a duplicate.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
I was wondering if there is a CSS-only way of styling an element based on it's child?
In my present situation, i've got an ul with a lot of li's in it. None of them have a separate identifying class, but only one of them got an iFrame (youtube video) inside of it. That li item, I want to style.
The CSS would somewhat be like
ul li:child-is[iframe] {
// styling
}
Is this possible?
Not today.
In the next occurrence of CSS, CSS4, you'll be able to precise the subject in a selector using an exclamation mark :
ul !li iframe {
// styling applies to the li element
}
but there's no pure CSS solution today.
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 6 years ago.
Is there any way using pure CSS(3) to select an element that is a preceding sibling of an element with a particular class?
i.e.:
html:
<div id='element-to-find'></div>
<div id='box1'></div>
<!-- a bunch more DOM elements between here --->
<div id='box2'>
<div id='inner-box'></div>
</div>
css:
#box1{ /*some styling*/ }
#box2{ /*some styling*/ }
#box2.active .....
Now, when #box2 has the class active I want to select and do something to the style of #element-to-find. Is there anyway to accomplish this?
There were multiple proposals to CSSWG in www-style#w3.org mailing list as for previous-sibling combinator: my one (2012), another 1, 2 (2013).
Common answer by Tab Atkins is like "we already have subject indicator for this". For selecting descendants of previous sibling (which would be trivial with previous-sibling combinator, e.g. .example - UL > LI), he suggests to use :matches() functional pseudoclass, e.g. :matches(!UL + .example) > LI. Both subject indicator and :matches() are currently in draft state and cannot be used in real world yet.
So you should add a regular class to the element-to-find element or (much less desired if your active class is added not via JS) use JavaScript to emulate previous-sibling-combinator functionality.
Without knowing any more of your selectors, you could potentially use CSS's :not() selector.
div:not(#box1), div:not(#box2) {
/*some style here*/
}
I would just suggest giving your #element-to-find a class as well when you select box2 and have a style ready for it.
This question already has answers here:
CSS select multiple descendants of another element
(3 answers)
Closed 9 years ago.
Is there a better way than this to select the elements with classes options OR inputs that are descendants of #height without selecting any elements with those classes that are not descendants of #height?
#height .inputs, #height .options
The #height seems redundant but #height .inputs,.options selects all the class="options" on the page, not just those descended from #height.
Nope, that's just how CSS is designed, and it's one of the reasons I use LESS CSS on all of my projects now. With LESS, you can structure your CSS more like JavaScript by nesting selectors. For example:
#height {
.inputs, .options {
/* properties */
}
}
metadept is absolutely correct. The comma is separating your selectors, and since you aren't specifying that you want the .options that are children of #height, it will target every element with the class .options on the page.
LESS CSS is a great tool to use; you may also want consider SASS - it just boils down to what you're more comfortable with.