This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
Is there a way to write css so it would select a div above a selector you already known.
For example.
#modal .container .login{
//style
}
so the above code will look for an ID of modal > classname of container > classname of login.
And style the .login.
Now is is possible to have it go the reverse. So style the #modal only if it has a child of .login and .container
Thanks
Short answer? no. (in the current CSS spec) as already answered here.
Is there a CSS parent selector?
but, I can give you a little trick.
create a special CSS rule (a class) with your special styling for the 'parent'.
then, with JQuery, on document.ready, check for all the elements in the DOM who meets your requirement (in your case: has a child of some class), and dynamically add the special CSS class.
It's not a perfect solution, but can be helpful in some cases.
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 3 years ago.
Is there a way to make a CSS Selector that matches the following?
All OBJECT elements
which have a PARAM element inside of them
The selector
OBJECT PARAM
doesn't work, as it matches the PARAM, not the OBJECT. I'd like to apply { display:none } to the objects; it's useless to apply that to the PARAMs.
(I'm aware I could pull this off with jQuery - $("object param").closest("object") - and VanillaJS - document.querySelector("object param").closest("object") - but I'm trying to create CSS rules on a page.)
To select all OBJECT containing PARAM, in CSS:
OBJECT:has(PARAM)
To select all OBJECT having a direct child PARAM, in CSS:
OBJECT:has(> PARAM)
No, what you are looking for would be called a parent selector. CSS has none; they have been proposed multiple times but I know of no existing or forthcoming standard including them. You are correct that you would need to use something like jQuery or use additional class annotations to achieve the effect you want.
Here are some similar questions with similar results:
Is there a CSS parent selector?
CSS Parent/Ancestor Selector
Complex CSS selector for parent of active child
Only thing that comes even close is the :contains pseudo class in CSS3, but that only selects textual content, not tags or elements, so you're out of luck.
A simpler way to select a parent with specific children in jQuery can be written as (with :has()):
$('#parent:has(#child)');
Is there any way you could programatically apply a class to the object?
<object class="hasparams">
then do
object.hasparams
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:
Closed 10 years ago.
Possible Duplicate:
Is there a CSS parent selector?
Is there some kind of .this selector in css?
Or maybe parent selector?
Thanks
There is no parent selector existing in CSS.
The only thing existing that comes somehow near to that is this:
a < img { border: none; }
But this is not a parent selector. This would select a tags but only if they contained an img tag.
There is no parent selector in CSS. See Is there a CSS parent selector?.
Why would you need a this selector? It would be redundant, because it implies you have already selected the target element.
well, I don't know if you mean this, but you can always start from the "parent" element, and then go deeper... e.g.
div#main_div div#sub_div1 div#sub_div2 span a {
/* your style here */
}
your style will then apply to the a-element. However, only if you have this order (sub_div2 has to be in sub_div1, which has to be in main_div) in your html code as well...
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 3 years ago.
Is there a way to make a CSS Selector that matches the following?
All OBJECT elements
which have a PARAM element inside of them
The selector
OBJECT PARAM
doesn't work, as it matches the PARAM, not the OBJECT. I'd like to apply { display:none } to the objects; it's useless to apply that to the PARAMs.
(I'm aware I could pull this off with jQuery - $("object param").closest("object") - and VanillaJS - document.querySelector("object param").closest("object") - but I'm trying to create CSS rules on a page.)
To select all OBJECT containing PARAM, in CSS:
OBJECT:has(PARAM)
To select all OBJECT having a direct child PARAM, in CSS:
OBJECT:has(> PARAM)
No, what you are looking for would be called a parent selector. CSS has none; they have been proposed multiple times but I know of no existing or forthcoming standard including them. You are correct that you would need to use something like jQuery or use additional class annotations to achieve the effect you want.
Here are some similar questions with similar results:
Is there a CSS parent selector?
CSS Parent/Ancestor Selector
Complex CSS selector for parent of active child
Only thing that comes even close is the :contains pseudo class in CSS3, but that only selects textual content, not tags or elements, so you're out of luck.
A simpler way to select a parent with specific children in jQuery can be written as (with :has()):
$('#parent:has(#child)');
Is there any way you could programatically apply a class to the object?
<object class="hasparams">
then do
object.hasparams