I'd like to match when /(\sclassName|^className)/ is satisfied, but when selecting css. Hypothetically I would use like:
[class(^|\s)='className'] {
font-size: 5000px;
}
I've found this resource, which is very nice: The Skinny on CSS Attribute Selectors, but it doesn't mention this use case.
I just want to match "icon-" in the following 2 examples, but not the 3rd.
Here, this can be achieved with [class^='icon-]
<div class='icon-something another-class'>
Here, this can be achieved with [class~='icon-'], but this does not match when 'icon-' is at the very beginning of the class string:
<div class='another-class icon-something'>
I do not want to match this, with -icon in the middle of a string. I believe *= will match this one, as will |= :
<div class='another-icon-class another-class'>
You'll need to use two separate selectors with the same rule. CSS selectors don't really support alternation.
[class^='icon-'], [class*=' icon-'] {
/* ... */
}
div {
color: red;
}
[class^='icon-'], [class*=' icon-'] {
color: green;
}
<div class='icon-something another-class'>should match</div>
<div class='another-class icon-something'>should match</div>
<div class='another-icon-class another-class'>should not match</div>
You can use the following selectors to select any element whose class either starts with "icon-" or contains " icon-" (note the space at the start):
[class^="icon-"], [class*=" icon-"] { ... }
JSFiddle demo.
Related
Can somebody help translate bracket usage in Tailwind.css?
In Example 1: - what does [&_*] mean?
In Example 2: what does the nested bracket combined with _& mean?
Example 1:
document.documentElement.classList.add('[&_*]:!transition-none')
Example 2:
<LightIcon className="hidden h-4 w-4 fill-slate-400 [:not(.dark)[data-theme=system]_&]:block" />
The closest I can get is the [] refers to attribute selection (in general) for .css and the Ampersand in is used by PostCSS processing in "normal" SASS nesting rules (as defined by tailwind's default nesting declaration support provided by postcss-nested).
What you are seeing is the usage of Tailwind's arbitrary variants feature.
Inside the square brackets is a CSS selector (or media query, I won't be talking about that here), with the ampersand (&) a substitute for the element that the class is being applied to. The nested brackets are attribute selectors, like with standard CSS selectors, as you correctly inferred in your Stacked Overflow question. Underscore is used instead of spaces in a CSS selector.
To give a few examples:
<div class="foo">
<div class="[.foo_&]:text-white"></div>
</div>
is conceptually like:
<div class="foo">
<div class="bar"></div>
</div>
<style>
/**
* .foo .bar
* ↓
* .foo &
* ↓
* .foo_&
*/
.foo .bar {
color: white;
}
</style>
With .bar now &, since .bar is the element we are applying the class/style to.
Another example:
<div class="foo"></div><div class="[.foo+&]:text-white"></div>
is conceptually like:
<div class="foo"></div><div class="bar"></div>
<style>
/**
* .foo + .bar
* ↓
* .foo + &
* ↓
* .foo+&
*/
.foo + .bar {
color: white;
}
</style>
The + grammar in CSS selectors does not strictly need spaces around it, so we can remove them for a more concise arbitrary variant syntax.
<div data-foo class="[&[data-foo]]:text-white"></div>
is conceptually like:
<div data-foo class="bar"></div>
<style>
/**
* .bar[data-foo]
* ↓
* &[data-foo]
*/
.bar[data-foo] {
color: white;
}
</style>
Hopefully this example makes the nested brackets clear.
I am very new to bootstrap and I would like to customize it. I am confused when I see '>' and '&' character. What does that mean? Is that present in less documentation. Is that some sort of nesting? Please see sample code below.
.navbar-nav {
> .open > a {
&,
&:hover,
&:focus {
background-color: #navbar-inverse-link-active-bg;
color: #navbar-inverse-link-active-color;
}
}
This might be the easiest question, don't hate me for this. Thanks folks.
In CSS, the ">" character means that only "first nested" elements will be targeted ("direct child" elements).
that means in the following scenario:
<div id="a">
<div id="b">
<div id="c">
</div>
</div>
</div>
then in CSS #a > div would only target <div id="b"> and NOT <div id="c">
without the > character, #a div would target both "b" and "c".
As for the & character in LESS:
The ampersand selector is most commonly used when applying a modifying class or pseudo-class to an existing selector:
a {
color: blue;
&:hover {
color: green;
}
}
The inner selector in this example compiles to a:hover. Without the &, it would compile to a :hover (a descendant selector that matches hovered elements inside of tags).
Read more at http://blog.slaks.net/2013-09-29/less-css-secrets-of-the-ampersand/
The > character refers to the direct children of certain element.
The & character is used in SASS for reference of the parent selectors.
This question already has answers here:
Is there a CSS selector by class prefix?
(4 answers)
Closed 8 years ago.
Is it possible to use a "wildcard" for elements having a class name starting with a specific string in CSS3?
Example:
<div class="myclass-one"></div>
<div class="myclass-two"></div>
<div class="myclass-three"></div>
and then magically set all the above divs to red in one go:
.myclass* { color: #f00; }
The following should do the trick:
div[class^='myclass'], div[class*=' myclass']{
color: #F00;
}
Edit: Added wildcard (*) as suggested by David
It's not a direct answer to the question, however I would suggest in most cases to simply set multiple classes to each element:
<div class="myclass one"></div>
<div class="myclass two"></div>
<div class="myclass three"></div>
In this way you can set rules for all myclass elements and then more specific rules for one, two and three.
.myclass { color: #f00; }
.two { font-weight: bold; }
etc.
You can easily add multiple classes to divs... So:
<div class="myclass myclass-one"></div>
<div class="myclass myclass-two"></div>
<div class="myclass myclass-three"></div>
Then in the CSS call to the share class to apply the same styles:
.myclass {...}
And you can still use your other classes like this:
.myclass-three {...}
Or if you want to be more specific in the CSS like this:
.myclass.myclass-three {...}
Given the following HTML:
<div class="required">required only</div>
<div class="note">note only</div>
<div class="required note">required and note</div>
<div class="note required">note and required</div>
And CSS:
.required:after { content: " *"; color: red; }
.note:after { content: " +"; color: red; }
The result in Firefox 11 is:
required only *
note only +
required and note +
note and required +
Where more than one class is supplied (.required and .note) I would like to have both "*" and "+" appended to the element such that:
required and note *+
note and required +*
Is this possible using pure CSS, and if so, how?
Edit: Here's a link to jsfiddle for this example: http://jsfiddle.net/xpZST/
You'll need additional rules for this to work.
Given that the ordering of classes matters (when normally it shouldn't!), you'll need to use attribute selectors instead of class selectors, and you'll need to create two rules:
[class="required note"]:after { content: " *+"; color: red; }
[class="note required"]:after { content: " +*"; color: red; }
Simply add these rules after the ones you have and it should work, as attribute and class selectors are equally specific.
jsFiddle preview
By the way, if you have common styles you can keep your code DRY by isolating them in another rule. For example, you can select each class and give them both color: red:
.required:after, .note:after { color: red; }
jsFiddle preview
How can you redefine a class if its in another specific class?
div.cls {
color:blue;
}
div.tst > div.cls {
color:red;
}
<div class="cls">test</div> // text color = blue
<div class="tst">
<div class="cls">test</div> // text color = red
<div>
<div class="cls">test</div> // text color = blue
</div>
<div>
How to make the last one also red?
jsfiddle
http://jsfiddle.net/gpD7H/
I used this, it work for me:
.name-of-parent * { color: red; }
Use the descendant selector [W3C]: div.tst div.cls
> is the child selector [W3C] and will only match children of an element.
Exactly like that. However, your second division won't be red text because it's also contained within another division. The > selector only matches to the immediate children under the element matched before it, so it's looking inside div.tst at only one level. Try removing the > from the selector:
div.tst div.cls {
color:red;
}
Your updated jsFiddle