I want to know if is there a way to select dynamically an element with same prefix of class but different suffix. Ex:
HTML
<div class="bg-primary-light"></div>
<div class="bg-primary-dark"></div>
CSS
.bg-primary-light { background-color: #fff }
.bg-primary-dark { background-color: #000 }
Is there a way to select for example
.bg-primary {
height: 100px;
.-light { background-color: #fff; }
.-dark {background-color: #000 }
}
`
Just to keep the "parent" properties
You can use the attribute selector with the *= operator to select elements by its partial class name
[class*="bg-primary"][class*="-light"] { background-color: #fff; }
[class*="bg-primary"][class*="-dark"] { background-color: #000; }
Related
how to style a div element that is nested within a section, this is what I tried, but I get the error expecting "}";
#section1
{
color: blue;
#div1 {
color: red;
}
}
If it have the id, you can select the ID directly:
#div1 {
// your style here
}
or ou can use CSS selectors in conjunction with it's IDs:
div#section1 div#div1 {
// your style here
}
if you are using just css, then try like,
#section1
{
color: blue;
}
#section1 #div1
{
color: red;
}
If you do not use less or sass, you should not write nested classes.
the only thing that you can use is that divide your class into 2 classes:
But you also can only use #div 1 instead of #section1 #div1.
#section1 {
color: blue;
}
#section1 #div1 {
color: red;
}
<div id="section1">
ABC
<div id="div1">
XYZ
</div>
</div>
When I unite class and class (or id and id, it doesn't matter), why the changes apply for only one element?
Example: picture and text under picture:
.photo
{
width: 230px; height: 230px;
margin: 15px;
}
.photo:hover + .name
{
color: black;
}
.name
{
text-align: center;
color: transparent;
}
.photo:hover + .name {
color: black;
}
Example:
div {
width: 50px;
height: 50px;
color: blue;
}
.photo:hover + .name {
color: black;
}
<div class="photo">.photo</div>
<div class="name">.name</div>
This code means: when elements with class photo are hovered, and the next element on the same level has class name, the color of element with class photo will be changed to black.
If you want to apply the same CSS rules to multiple tags/IDs/classes, you need to use comma, like this:
.photo:hover, .name {
color: black;
}
Example:
div {
width: 50px;
height: 50px;
color: blue;
}
.photo:hover, .name {
color: black;
}
<div class="photo">.photo</div>
<div class="name">.name</div>
In this case, black color will be applied to elements with name class, and to hovered elements with photo class.
the + is not used to select a common style for both the classes. '+' is the symbol for the adjacent sibling selector it selects all elements that are the adjacent siblings of a specified element. if u want to add some common style to both the classes then just seperate both classes with common like .photo:hover , .name {color: black;} or you can use some common words in the class name like instead of photo you can write "photo color" and instead of name "name color" and then style it by using .color{color: black;} in this case black color will be applied to both of your classes or you can use attribute selector with common class name [class*="color"]{color: black;} this will also do the same effect.
Modernizr adds classes to the document's <html> tag, e.g. <html class="no-touchevents">.
In my code, I used to write something like this.
.style { background: green; }
.no-touchevents .style { background: red; }
So the element would be green (OK) if the touch is supported and red (error) if it's not. Now with CSS modules, my .style class is defined in a single file and gets transformed into something like this.
.xR23A { background: green; }
.hjTT7 .xR23A { background: red; }
If I wrap my class in a :global clause, it should remain unchanged if I understand it correctly. However, this will apply to every nested class, so I will remain with this.
.xR23A { background: green; }
.no-touchevents .style { background: red; }
How do I solve this to arrive to the desired solution? This is what I am after.
.xR23A { background: green; }
.no-touchevents .xR23A { background: red; }
you should be able to use the paren version of global to only hoise the modernizr portion.
i.e.
.style { background: green; }
:global(.no-touchevents) .style { background: red; }
Please is possible to set scss for element inside --rounded ? I do not wanna use .box__something, but I need to modify children that is depend on parent modifier
<div class="box">
<div class="box__something">Hello</div>
</div>
<div class="box box--rounded">
<div class="box__something">Hi</div>
</div>
.box {
&__something {
background: blue;
}
&--rounded {
background: green;
.box__something { // <<< Is some better selector?
background: pink;
}
}
}
Sass doesn't have any great built-in solutions to solve your issue, this is a problem that has been explored many times. You can however acheive the result you are after in a slightly un-elegant manner by using the & helper to join the classes that you wish to join. I have included a live example here.
While this does work, you must realise that if you want to style the .box--rounded class directly you must have it inside it's own class as illustrated below, you cannot use it with the trailing & class that we have placed &__something on.
I recommend you play around with my sassmeister gist and see what results you can come up with.
.box {
&__something {
background: blue;
}
&--rounded {
background: green;
}
&--rounded & {
&__something {
background: pink;
}
}
}
I hope this has solved your issue.
The modifier should be used not on the parent, and the child element .box__something
If I understand your problem correctly, I feel your pain! As soon as you nest a nested property & changes to the parent.
You can however cache the original class name as a variable like this:
$box: box;
.#{$box} {
.#{$box}__something {
background: blue;
}
.#{$box}--rounded {
background: green;
.#{$box}__something { // <<< Is some better selector?
background: pink;
}
}
}
The only problem with the method above is that you end up with a larger volume of compiled CSS. This renders to:
.box .box__something {
background: blue;
}
.box .box--rounded {
background: green;
}
.box .box--rounded .box__something {
background: pink;
}
To reduce the size of the output you could combine & with the variable method like so:
.box {
$box: &;
&__something {
background: blue;
}
&--rounded {
background: green;
#{$box}__something {
background: pink;
}
}
}
This renders to:
.box__something {
background: blue;
}
.box--rounded {
background: green;
}
.box--rounded .box__something {
background: pink;
}
That way you can change the class name in the variable and everything gets updated, I also think it reads a bit better.
My goal:
To use css to select the html tag with 2 different selectors based upon class.
My issue:
It seems as though the HTML tag can't be selected with a class as well on CSS.
What I have Tried:
Option 1:
.light-theme html {
background: #fff;
}
.dark-theme html {
background: #000;
}
Option 2:
html .light-theme {
background: #fff;
}
html .dark-theme {
background: #000;
}
Option 3 (hack to get around original issue:
.light-theme {
background: #fff;
}
.dark-theme {
background: #000;
}
My results:
Option 1 and Option 2 do not work at at while Option 3 work fine, but never includes the HTML as a selector.
My question:
Is it even possible to use classes as a css selector for the html tag using css?
html.light-theme {
background: #fff;
}
html.dark-theme {
background: #000;
}
html.light-theme means select html tag with class light-theme