This question already has answers here:
Succinct way of specifying two or more values for an attribute in css selector
(2 answers)
Closed 6 years ago.
Is it possible to simplify comma separated CSS selectors with common prefix/suffix?
My current style looks like this (much longer though):
html:lang(qw) div[data-domain*='abc.com'], html:lang(qw) div[data-domain*='def.com'], html:lang(qw) div[data-domain*='ghi.com'], html:lang(qw) div[data-domain*='jkl.com'] {
display: none!important;
}
I'm wondering if something like the following would be possible:
html:lang(qw) div[data-domain*=('abc.com', 'def.com', 'ghi.com', 'jkl.com')] {
display: none!important;
}
As per the comments, this is simply not possible with plain CSS right now. Your only option to shorten the selector is to use a pre-processor, like SASS (Syntactically Awesome StyleSheets). SASS allows you to write more readable, shorter code. You can compile a SASS (*.scss) file to plain CSS on your own computer, so by the time it's on the server, it's the plain old CSS you are used to, understood by all browsers. No extra requirement from your users.
For this particular case, you could use a for-each loop.
#each $domain in 'abc.com', 'def.com', 'ghi.com', 'jkl.com' {
html:lang(qw) div[data-domain*='#{$domain}'] {
display: none !important;
}
}
This would result in the following CSS:
html:lang(qw) div[data-domain*='abc.com'] {
display: none !important;
}
html:lang(qw) div[data-domain*='def.com'] {
display: none !important;
}
html:lang(qw) div[data-domain*='ghi.com'] {
display: none !important;
}
html:lang(qw) div[data-domain*='jkl.com'] {
display: none !important;
}
Related
I have this css piece of code (which is generated from a less file, but I don't know anything about less and this code is a piece of a global css file which include all generated code from all less file).
I'm looking for the less equivalent to this piece of css code to find which file I need to modify.
input[type="checkbox"] {
display: none;
}
Thanks for your assistance.
You can't really reverse engineer Less, but this style rule could show up in a number of ways. For example:
Using the & operator:
input{
&[type="checkbox"] {
display: none;
}
}
A selector var:
#my-selector: input[type="checkbox"];
#{my-selector}{
display: none
}
A mix-in:
.dn() {
display: none;
}
input[type="checkbox"] {
.dn();
}
Are there any tools to compile CSS custom properties declared at not :root rule? I want following code with custom properties
.dark {
--bg-color: black;
--fg-color: white;
}
.light {
--bg-color: white;
--fg-color: black;
}
.foo {
background: var(--bg-color);
display: block;
}
.bar {
color: var(--fg-color);
display: inline;
}
be compiled to their non-custom-prop equivalents like that
.light .foo, .light.foo {
background: white;
}
.dark .foo, .dark.foo {
background: black;
}
.light .bar, .light.bar {
color: black;
}
.dark .bar, .dark.bar {
color: white;
}
.foo {
display: block;
}
.bar {
display: inline;
}
The goal is to
switch color schemes by switching dark/light class on root DOM element
use valid css syntax (no sass less)
keep rules code compact
It's actually not safe to do that. I can tell you because I tried so hard to make a safe transformation.
But I failed.
https://github.com/postcss/postcss-custom-properties/issues/1
Ideal solution. Your example is valid CSS and can be used in many browsers (not in IE, Edge (but is in development) and Opera Mini as of writing this answer, 2017-03-27, other major browsers are fine).
Suboptimal solution. Some CSS can be transpiled to achieve better browser support. The solution I found does not support variables on non-:root elements, however. There are also other objections against transpiling of 'future' CSS into 'current' CSS. To the best of my knowledge, you will have to implement your own transpiler (or postcss plugin) if you want to transpile custom properties not on the :root element, but be warned that that is hard in general. Now you don't need the general part, so it is possible. Just does, to the best of my knowledge, not exist yet.
Preprocessing solution. Of course, you don't need a general implementation of custom properties. You have different themes that have their own values for the same set of properties and that's it. Thus, a separate stylesheet can be created as a preprocessing step using any CSS preprocessor.
Now you say the following,
use valid css syntax (no sass less)
but I am going to show this anyway, because I believe that it is a valid solution to your problem. It is definitely the only one I know that actually works if you want to/need to support IE, Edge and/or older versions of other major browsers (Firefox < 31, Chrome < 49, Safari < 9.1, Opera < 36)
You could do this using SASS for example, to do the transpiling on the server side.
// define styles, use variables throughout them
// your entire style definition goes into this mixin
#mixin myStyles($fg-color, $bg-color) {
.foo {
display: block;
background: $bg-color;
}
.bar {
display: inline;
color: $fg-color;
}
}
// define themes, that set variables for the above styles
// use named arguments for clarity
.dark {
#include myStyles(
$fg-color: white,
$bg-color: black
);
}
.light {
#include myStyles(
$fg-color: black,
$bg-color: white
);
}
This compiles to the following.
.dark .foo {
display: block;
background: black;
}
.dark .bar {
display: inline;
color: white;
}
.light .foo {
display: block;
background: white;
}
.light .bar {
display: inline;
color: black;
}
This is not exactly what you want to obtain, but very close. Realistically, I think this is the closest you will get to obtaining your desired output. I know you want to
keep rules code compact
but what you are saying there (I think) is that you want to split out custom properties from their rules to save on number of rules, which is not something any preprocessor I know supports.
You can organize your source SASS in separate files to keep an overview easily. You can even set up a build system that generates a separate stylesheet for every theme you have. It is then possible to have your users select an alternative stylesheet. Browsers have some support for this, but switching using JavaScript is also definitely possible in the latter case. Simply set all stylesheets to be disabled except for the selected one. Here is an example.
This question already has answers here:
Can a CSS class inherit one or more other classes?
(29 answers)
Closed 6 years ago.
Can I wrap a class (or id) around styling to apply it to elements only in that class?
For example, I have :
.title {
color: #000;
}
.block {
width: 100%;
}
.wrapper {
width: 90%;
}
I'd like to create a different design for these things, if they are in a specific class. I know You can do it like so:
.specific_class .title{
color: #fff;
}
But then I have to add it to each block. Can I do something like this?
.specific_class{
.title {
color: #fff;
}
.block {
width: 99%;
}
.wrapper {
width: 91%;
}
}
..just to assign different styles to work, if elements are in a specific class.
(I know the last example doesn't actually work).
I have a lot of these little blocks, so one "wrapping" would work and look a lot better than copy/pasting .specific_class in front of each one.
I'd like to apologize, if such question exists. I just couldn't find the correct words and find the solution, but there probably is a question like mine.
It is not possible in regular CSS. However, you might be interested in SASS, a CSS preprocessor that allows you to write nested rules (amongst other things) and compile them down to regular CSS.
What's the best approach to getting Sass (3.4.15) to parse browser CSS property hacks - not using compass or any other library. E.g. '_property' or '*property'.
.hack-test{
display: inline-block;
display: *inline;
}
Invalid CSS after " display: ": expected expression (e.g. 1px, bold), was "*inline;"
I searched around Stack Overflow but could not find anything that could definitively answer this.
You can use sass strings, in such a way that the invalid css is injected as a string.
I put it all inside a mixin for re-use:
$star: "*inline";
#mixin hack-test($selector) {
#{$selector} {
display: inline-block;
display: #{$star};
}
}
So if you try and use the mixin:
#include hack-test('.foo');
The css output will be as desired:
.foo {
display: inline-block;
display: *inline;
}
You can view some SCSS browser hacks I've put on Github here
This question already has answers here:
What do commas mean in CSS selectors? [duplicate]
(4 answers)
Closed 7 years ago.
What does this type of CSS definition mean? Note the first two classes are separated without comma but the last two are separated with comma.
.Container .layout, .groupContainer
{
width: 100%;
}
The comma separates selectors allowing one group of CSS styles to apply to multiple different groups. In your posted CSS:
.Container .layout,
.groupContainer {
width: 100%;
}
width: 100% will be applied to elements of class layout within elements of class Container, and to elements with the groupContainer class.
References:
CSS: 'Groups of Selectors'.
It is shortcut of
.groupContainer
{
width: 100%;
}
.Container .layout
{
width: 100%;
}
You should use it to group your CSS
As explained above, it helps group single CSS declarations across multiple selectors, and can help save file size (which could come in very handy as your CSS file gets larger!) and make things a bit clearer to read.
For example, you could have multiple selectors with the same declarations:
.div1 {
color: red;
}
.div2 {
color: red;
}
.div3 {
color: white;
}
.div4 {
color: white;
}
And you can shorten this by using:
.div1,.div2 {
color: red;
}
.div3,div4 {
color: white;
}
The comma is used for grouping, when the same rule applies for several selectors. Each selector is completely independent of the others.
The space is used for select any .layout that are inside .container, even if there are other elements between them.
For your question, the answer is:
you grouping .layout which is inside the .container class and .groupContainer for both the width value is 100%.