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
Related
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; }
What I want to achieve
I want to detect when the class name of the general CSS library and the class name declaration of my CSS file are duplicated (On the editor of PHPStorm, Atom, VSCode, etc).
Is there a way to detect in the HTML file if the class name is duplicated?
What I examined (but they are useless)
So I searched for CSS Lint and found CSS LINT and stylelint.
However, it seems that CSS LINT does not have a function to detect duplicate class names, and the following CSS did not issue any errors or warnings.
.duplicate_class {
background: #ffa;
}
.duplicate_class {
font-size: 5px; /* I want errors and warnings */
}
stylelint's no-duplicate-selectors check selectors instead of class names, thus allowing duplicate class names:
.class {
background: #ffa;
}
body .class {
font-size: 5px;
}
Of course, htmllint didn't have the ability to detect duplicate class names.
I have never come across such a plug, a tool. But it is possible to combine such classes.
Input
.module {
color: green;
}
.another-module {
color: blue;
}
.module {
background: red;
}
.another-module {
background: yellow;
}
Output
.module {
color: green;
background: red;
}
.another-module {
color: blue;
background: yellow;
}
Library is postcss and plugin postcss-combine-duplicated-selectors.
Can be used from the command line.
I was wondering when I worked on a project if I could achieve this, but assuming it does not seem currently possible to get this behavior without any change of structure (I would really like to keep the hover inside its own class declaration), to you, what would be the cleanest solution ?
LESS
#blue: blue;
#blue-darker: darken(#blue, 20%);
.text-blue {
color: #blue;
/* something like that */
&:hover when (element_reference == hyperlink) {
color: #blue-darker;
}
}
CSS
.text-blue {
color: blue;
}
/* something like that */
a.text-blue:hover {
color: #000099;
}
HTML
<p class="text-blue">Text in blue with no hover effect</p>
<a class="text-blue" href="#">Link in blue with hover effect</a>
This should do what you want:
.text-blue {
color: #blue;
a&:hover {
color: #blue-darker;
}
}
Fiddle
I would use a :link CSS pseudoclass, because <a> without href is not treated as a hyperlink. See at https://jsfiddle.net/jsqdom1s/
.text-blue {
color: #blue;
a&:link:hover {
color: #blue-darker;
}
}
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.