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
Related
This question already has an answer here:
Is there a CSS selector for element without any class?
(1 answer)
Closed 4 years ago.
I am trying to target all instances of an h tag but only when it has no class.
For example:
<h1 class="class1">First</h1>
<h1 class="class2">Second</h1>
<h1>Third</h1>
In this instance I only want to target Third but not the others - I found an answer (Is there a CSS selector for element without any class?) which referred to [class=""] selector but that only seems to work on:
<h1 class="">Third</h1>
It is not practical to go through and list all the instances of classes and then reference them using :not so is there another way?
I accept that this is being made worse through the use of !important etc in the current CSS on some of the h1 classes but I have inherited this and I don't have the ability to start from scratch.
if you use h1: not ([class]) this tag search all.
If there are many !important you should use it in the new css and this new css place it at the end of all .css
Example:
<h1 class="class1">First</h1>
<h1>Second</h1>
<h1>Third</h1>
h1:not([class]) {
color: red;
}
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:
CSS selector based on element text? [duplicate]
(3 answers)
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 9 years ago.
Get Here
I need to hide above link by using css (display:none).How can I select that (i.e. link with 'Get Here' text)
It isn't possible to target an element based on its content. but, it is possible to target an href based on its link:
Get Here
a[href="go/there.html"]{}
If you can have a value other than # in your href, this approach could work.
No, not possible for css. Css is made for styling elements, not selecting texts. You can do it with jquery though:
$("a:contains('Get Here')").hide();
Not with CSS, but using jQuery:
$("a:contains('Get Here')").hide();
or
$("a:contains('Get Here')").css('display','none');
You can't do that with CSS. But even if you could, you shouldn't have done it, really. Never. Even forget about using javascript for this (if it was up to me I would exclude :contains filter from jQuery). This is very-very bad approach to style things. Because tomorrow you change the link text and your code breaks. What you really need to do is to use classes:
Get Here
with the next CSS:
.get-here {
display: none;
}
If you need to do it automatically whenever that text appears (and you don't have control over the text), use jQuery as asku suggests.
If you have control over the text, it's much simpler to add a class to that link and style it. You can add the same class to all the links that need hiding.
HTML:
Get Here
CSS:
.hide {display: none}
With CSS3 you could also use a[rel="#"] {display:none}
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.
This question already has answers here:
CSS - Is it possible to select multiple different child elements within a parent without repeating the parent?
(3 answers)
Closed 8 years ago.
I am writing some rules in CSS for some elements that shares the same parent.
#parent_id li
#parent_id label,
#parent_id input,
#parent_id select { ... }
Is there an alternative syntax to avoid to repeat the parent id?
No there is not in pure CSS, but you can use some CSS preprocessor like:
LESS CSS http://lesscss.org/
Sass http://sass-lang.com/
Switch CSS http://sourceforge.net/projects/switchcss/
...or other
If those elements you're selecting are all the elements within the parent element, you could just apply the style to the parent element:
#parent_id {
....
}
Styles in there should be inherited down so that the elements inside it are get those styles as well.
Another option might be to use the universal * selector:
#parent_id * {
....
}
This will affect all elements at least one level below the parent_id element, but not parent_id itself. If you've got plain text in parent_id that you want to leave unaffected, this might be the one to use.
A third option would be to change your HTML markup so that the elements you want to affect have a class. Then your CSS could simply reference that class instead.
(btw - yes, I'm aware of LESS/SASS/etc, but I didn't think there was much value in posting the same answer as everone else)
CSS native dont support this. But you can use SASS/LESS:
#parent_id {
label, input, select { ... }
}
In simple css it is not possible. Try LESS to achieve this.