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
Related
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.
This question already has an answer here:
What do these double-dash-prefixed CSS properties do? [duplicate]
(1 answer)
Closed 2 years ago.
I looked in an ionic project, there are some styles defined like below:
.modal{
padding: .4rem .2rem;
--border-radius:10px;
--background:black;
--height:3rem;
}
What does prefix '--' mean in Saas or CSS?
The '--' notation in css mark the declaration of a new variable.
The following is from this page: https://www.w3schools.com/css/css3_variables.asp
Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector.
The variable name must begin with two dashes (--) and is case sensitive!
Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.
This question already has answers here:
Can I use a :before or :after pseudo-element on an input field?
(22 answers)
Closed 7 years ago.
Let's say you have a form input button that you want to style with CSS, but you also want to use "::before" to append text before the styling. How would you do that? Is that even possible?
input[type=submit]::before {} (this doesn't work)
Is editing "value='blahblahbuttontext'" in the form the only way to achieve this?
Thanks,
-- MP
No, pseudo elements don't work on inputs. You can achieve such an effect using javascript, or you can use pure CSS but you will need to replace the input with a button.
[type="submit"]:before{
content: "blahblah";
}
<button type="submit">buttontext</button>
This question already has answers here:
Handling a colon in an element ID in a CSS selector [duplicate]
(8 answers)
Closed 8 years ago.
I'm doing some css for my form that looks like:
<sf:form>
<table>
...
</table>
</sf:form>
(according to Spring framework form tag)
I want to select this form and can't do it in traditional way:
sf:form {
property: value;
}
because of the colon interpreted by css.
I know that I can add an identifier to my form, such as id or class to select it, but also it's interesting for me if there is a way to do it with some css trick. Maybe, taking the parent element of a table tag will take care of it? The sf:form could be taken as parent of a table by:
sf:form>table
But here we have this annoying colon again.
So, can I take a table parent tag without specifying the sf:form one? Or, maybe, there are another ways of dealing with such elements as colon that breaks the structure of a tag in the css case?
Use a forward slash to escape the colon after the namespace:
sf\:form > table {
property: value;
}
Example:
http://jsfiddle.net/fZm28/
Reference:
http://msdn.microsoft.com/en-us/library/ms762307(VS.85).aspx
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