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.
Related
This question already has an answer here:
Difference in applying CSS to html, body, and the universal selector *?
(1 answer)
Closed 3 years ago.
I would like to ask what is the difference between *{} and body,html{}. It changes the view in the html and I want to have a broad knowledge about this. Thanks.
The wildcard (*) will apply the styling to every element found on your HTML page unless you give specific styling for that element. It overrides any possible inheritance for the set property because it is setting that default value for each individual element. If you want to change something in a section that has child elements then you will have to make that change for each child. This can be useful in a few cases (box-sizing is probably the most common use) but most of the time you will not want to use this. Depending on how heavily this is used, it can slow down your page load times.
Setting the styling with body/html allows for inheritance to still take place. Elements within the html/body will still show the styling found here if their default is set to inherit. This will still allow a closer parent to the child to override the styling. In CSS, the best option is to be more specific.
The *{} selector (Universal selectors) matches elements of any type. (MDN).
body,html{} select body and html elements.
Consider the following example:
* { /* Selects all elements */
color: blue;
}
html,
body { /* Selects html and body element */
color: green;
}
<html>
<body>Body</body>
<footer>footer</footer>
</html>
*{}
is a universal selector. It will implement the styling of all the elements. If you want to do some changes with styling of the particular element then you have to override it.
body,html{}
will do the same for you. But there is one scenario. If you want to inherit the properties from the parent then body,html{} is definitely going to play this role. It is used for the inheritance of properties
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 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.
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