This question already has answers here:
Select elements by attribute in CSS
(6 answers)
Closed 1 year ago.
Here's the link to css code I am curious about : https://codepen.io/charlesxiao/pen/NWjgQQm.
Do you know what does the following css code means?
.awesome[data-sizing="intrinsic"] {
width: min-content;
}
What's this data-sizing attribute? I can't find it anywhere.
Thanks!
Much like how your selectors can target classes (.class) and ids (#id), your CSS can also target attributes, including data-*. It's common practice for javascript to target data-* attributes rather than going through the rigmarole of adding/removing classes. There's some particulars choosing between the two.
width: min-content; simply sets the element to the smallest possible size — the word "awesome" is the largest element and that's used as the width.
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 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 values using HTML5 data attribute [duplicate]
(3 answers)
Closed 9 years ago.
I use attr(data-width) to get the data-width-attribute from some list-item's. I try to use these values to set the width of that element.
The problem is that css cannot handle strings as width/height-value.
e.g.:
<foo data-width='100%'></foo>
/* can not work */
foo {
width: attr(data-width)
}
so I need to convert the value from the data-attribute to an integer (+unit).
Is that somehow possible?
No. And you cannot use an attr(...) construct as the value of a normal property, only in the value of a content property.
Instead of data-width attributes, you could use just style attributes. Not ideal, but more logical than to use data-* attributes to carry style info.
not without a precompiler and SASS / SCSS mixins
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:
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