This is my class -
.swatch input:checked + label {
background-color: #fff;
}
.swatch {
Change something here when above class is active.
}
Is there any way to do this? I am using liquid templating if that could be of assistance.
No.
It is possible for one ruleset to affect another using CSS variables…
body {
--example: yellow;
}
input:checked+.swatch {
--example: brown;
}
.swatch {
background: var(--example);
}
<input type="checkbox">
<div class="swatch">
Hello, world
</div>
… but that would only allow the variable to be set on the input, it's descendant (if inputs could have such things) or a later sibling.
There is no parent selector.
Related
I have three class : product1, product2, product3. I can add css to all these class as follows:
.product1, .product2, .product3{
// add css here
}
But I am looking for more cleaner code to track 1 to 3 followed by 'product' and add css to these. My expectation can be Pseudocode Examples:
.product1to3{
// fun with css.
}
Is there any approach in css?
There is no such kind of css pseudo on what you wanted to achieve.
You can try to use SASS to achieve what you wanted.
and then use the #for Directive
SASS
#for $i from 1 through 3 {
.product#{$i} { width: 20px; }
}
CSS
.product1 {
width: 20px;
}
.product2 {
width: 20px;
}
.product3 {
width: 20px;
}
Also you can try to use LESS
Hope this helps
pure css implementation JSfiddle
So basically you need an "Attribute Begins With Selector" i.e select all classes which start with "product" and then you can use nth child attribute to select range
div[class^="product"]:nth-child(n+4):nth-child(-n+5) {
background: red;
}
Really good article on complex css and nth:child
/* This selects all the elements which have the class name starting with
"product"
*/
[class ^= "product"] {
//CSS
}
If you have an unknown / high number of ".product(x)", and for whatever reason don't want to use an extra class to target them, you can get away with an attribute selector that matches all elements that have a class containing "product".
[class*="product"]
div{
border:2px solid tan;
height:40px;
}
[class*="product"]{
background:steelblue;
}
<div class="product1"> product 1 </div>
<div class="product2"> product 2 </div>
<div class="not"> not a product</div>
<div class="product3"> product 3 </div>
<div class="product4"> product 4 </div>
It occupies just 1 line of compiled CSS, so it's minimal footprint, but be careful how you apply it.
Not an answer for the OP but for others that may find their way here remember that you can use multiple classes for each element.
html
<div class="product product1"></div>
<div class="product product2"></div>
<div class="product product3"></div>
css
/* shared styling */
.product {
display: flex;
background-color: gray;
border: 1px solid red;
}
/* individual styling */
.product1 {
color: black;
}
.product2 {
color: white;
}
.product3 {
color: blue;
}
I have the markup:
<body class="arabic specific-page">
<div class="child">
<div class="grand-child">
</div>
</div>
</body>
In my sass I am already inside .specific-page and .child. I would like to apply a specific property if body is .arabic:
what I already have:
.specific-page {
.child{
.arabic & {
.grand-child{
gets compilet to:
.arabic .specific-page .child .grand-child
I would like to compile to:
.arabic.specific-page .child .grand-child (body has the same class)
without changing the selector at the top of the tree, only at child level
You can do this using #at-root like so:
.specific-page {
.child{
#at-root .arabic#{&} {
.grand-child{
border: 1px solid red;
}
}
}
}
This compiles to: .arabic.specific-page .child .grand-child, see here.
For this to work you're going to need to alter your SASS a bit. Try
.specific-page {
&.arabic {
.child {
.grand-child {
You could use #at-root and break out of your nesting structure.
.specific-page {
.child{
.arabic {
#at-root .arabic.specific-page .child .grand-child{}
}
}
}
I use an #mixin function like this, when i need change some element in middle
of a sass big tree.
The first parameters is the parent element, the target, and the second the class that should have.
SASS
#mixin parentClass($parentTarget, $aditionalCLass) {
#at-root #{selector-replace(&, $parentTarget, $parentTarget + $aditionalCLass)} {
#content;
}
}
Sample,
like I need to improve font size in a strong tag, when .txt-target had .txt-strong too
HTML
<section class="sample">
<h1 class="txt-target txt-bold">Sample<strong>Bold</strong>Text</h1>
</section>
SASS
section{
.txt-target{
strong{
#include parentClass('.txt-target','.txt-bold'){
font-weight:bold;
font-size:30px;
}
}
}
}
2 options:
.arabic.specific-page {
.child{
.grand-child{
Or (you can switch the order of arabic and specific-page):
.arabic{
&.specific-page {
.child{
.grand-child{
I'm trying to style a label that has a checkbox inside of it. I want the label to change color when the checkbox is selected.
<label>
<input type="checkbox">
</label>
Using SASS and the ampersand, this should be possible with:
input {
background-color: red;
&:checked {
label & {
background-color: green;
}
}
}
I ran a test and this worked, however, this doesn't work in Shopify. In fact, Shopify doesn't seem to compile it at all. Am I missing something?
Selecting a parent is currently not supported in any major browser (no matter what CSS preprocessor you are using).
However if your label is on the same level as your checkbox, then you can use the sibling selector like so:
input:checked + label {
background: red;
}
<input id="aCheckbox" type="checkbox" />
<label for="aCheckbox">Test</label>
In terms of SCSS it should look something like (I haven't tested it though):
input {
background-color: red;
&:checked {
& + label {
background-color: green;
}
}
}
I want to output:
.selector.another-selector .selector__block{some declaration}
but i want to nest it:
I am using & at the end so I can nest it under __block,
but how can I make it adjoin class with .selector?
code example:
.selector{
&__block{
// i want to put my .another-selector declaration here
.another-selector &{
//syntax issue
//need to make it .selector.another-selector .selector__block
}
}
thanks in advance.
If you nest your selector, then it has to be in the .selector__block context (&).
You have 2 solutions here :
You can repeat the first selector, as such:
.selector {
&__block {
...
.another-selector.selector & {
// Here `&` means `.selector__block`
}
}
}
You can nest differently:
.selector {
&__block {
...
}
&.another-selector &__block {
// Here `&` means `.selector`
}
}
Maybe the second solution is better since it respects the inception rule and is less dependent of the DOM structure.
BTW, you can also try https://www.sassmeister.com/ to play with your selectors
I would suggest that you don't nest BEM at all. Just go with plain declarations for two valid reasons.
1) error tracking nested BEM is hard, let say you get a class from devtools that is .hero__heading. That will not match anything in your code when doing a search. Now the example above is not that hard to figure out anyway but inheriting a project with nested structure is a pain. I suggest reading Harry Roberts article on code smells in css
2) nesting like this will often complicate when wanting to override with other classes like in your case.
Consider this code:
.selector {
background-color: deepskyblue;
}
.selector__block {
color: lightblue;
.another-selector & {
color: lightcoral;
}
}
#Dejan.S I'm not a big fan of BEM (but that's another rant ;-). If however you are using BEM I think nesting will help to illustrate the hierarchy and what to expect
SCSS:
.selector {
// selector styles
color: red;
// default selector block style
&__block { color: green; }
// selector variant selector block styles
&.foo &__block { color: blue; }
&.bar &__block { color: yellow; }
}
CSS Output:
.selector { color: red; }
.selector__block { color: green; }
.selector.foo .selector__block { color: blue; }
.selector.bar .selector__block { color: yellow; }
HTML:
<div class="selector">
Selector <!-- red -->
</div>
<div class="selector">
Selector <!-- red -->
<div class="selector__block">
Selector Block <!-- green -->
</div>
</div>
<div class="selector foo">
Selector <!-- red -->
<div class="selector__block">
Selector Foo Block <!-- blue -->
</div>
</div>
<div class="selector bar">
Selector <!-- red -->
<div class="selector__block">
Selector Bar Block <!-- yellow -->
</div>
</div>
I would like to be able to set dynamically in my component, whether or not an element with a class name that starts with "mark-as" (e.g "mark-as-car", "mark-as-cat") will have a yellow background.
I can add the following to the component css file:
*[class^="mark-as-"] {
background: #ffff00;
}
But I would like to know how to enable/disable it dynamically in the component logic without changing the elements class names.
You can use below css approach.
You can visit css selectors for more knowledge of css selectors.
[class*="mark-as-"] {
background: #ffff00;
}
Below an example to make more understandable.
.mark-as-red {
color:#fff;
}
.yellow-mark {
color:#fff;
}
p[class*="-as-red"] {
background: #999;
}
p[class^="yellow-"] {
background: yellow;
}
<p class="mark-as-red ">
HELLO
</p>
<p class="yellow-mark ">
HELLO
</p>