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.
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 answers here:
Using regular expression in css?
(6 answers)
Closed 3 years ago.
In my HTML template I have some CSS generated classes like :
.term-1-2
.term-2-2
.term-10-0-1
Ho can I create a CSS class to include all letters after "term" like :
.term-*
How is it possible in css ?
Thank you
[class*="term-"] { /* your rules here */ }
This is called attribute selector.
It reads
"Apply the following rules to any element with a class attribute that has term- in it."
Please note that this would also match e.g. <div class="regular-term-a">. If that is a problem, go with #Roko C. Buljan's answer.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Use this rather complicated selector:
[class^="term-"], [class*=" term-"] {
}
to make sure you're targeting both
^= Starts with "term-" i.e: class="term-1-2 foo bar baz"
*= Contains (notice the leading space!) " term-" i.e: class="foo bar term-1-2 baz"
MDN: Attribute selectors
This question already has answers here:
Can I write a CSS selector selecting elements NOT having a certain class or attribute?
(10 answers)
Closed 4 years ago.
I have this rule:
* {background-color:#ddd;font-family: Arial,Helvetica,sans-serif;font-size:13pt}
Unfortunately, it imposes the font-size on a < span > element. I want the span to continue to have no default rules so I can use it to change text color, etc.
My * rule has the lowest priority, which is good since * is used to set default values, which we want overridden easily. However, it applies to the span rule, which makes span erroneously include its styles. Span should be used to apply specific styles, not the default styles.
Use the :not pseudoselector to exclude span, as follows:
:not(span) {background-color:#ddd;font-family: Arial,Helvetica,sans-serif;font-size:13pt}
This question already has answers here:
Append the parent selector to the end with Sass
(1 answer)
Using SASS & reference for OOCSS
(1 answer)
Closed 8 years ago.
I have a class named button_class. Now a button or an input tag could have this class. Now using sass, I need to add something to the css if the tag name is input. Like this:
.button_class {
display: inline-block;
/* something like this */
& input {
padding: 2px;
}
}
As you guessed, I don't know how to do that.
SASS syntax doesn't permit this yet. :(
&input gives
"input" may only be used at the beginning of a compound selector
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