If I have a dozen CSS selectors, and want to assign :hover properties to all of them, I'm used to doing this:
selector, selector2, someOtherSelector, someSelector div {
//some properties
}
selector:hover, selector2:hover, someOtherSelector:hover, someSelector div:hover {
//some properties
}
Typing :hover four times seems redundant. Is there a way to group the selectors like
(selector, selector2, someOtherSelector, someSelector div):hover {
//some properties
}
instead?
Not natively in CSS. By using something like SCSS, you can write:
selector, selector2, someOtherSelector, someSelector div {
// some properties
&:hover {
// some more properties
}
}
If they all share the same hover properties you could create a class that is shared for all that defines your :hover
So you'd get:
allSelectors, selector, selector2, someOtherSelector, someSelector div {
//some properties
}
allSelectors:hover {
//some properties
}
Re-usable classes makes for cleaner and less code.
Sadly, there's not really any easier way of doing what you're trying to do, unfortunately. Unless you want to move the styles to jQuery or something (but that's not a good solution).
Related
I've an element I want to style only if it's got two classes applied to it:
custom-select-value--companies
and
custom-select-value--companies-disabled
It's actually the pseudo element I want to style, and the following css works:
.custom-select-value--companies.custom-select-value--companies-disabled::after { // Styles }
It's probably very simple, but I was just struggling to translate that to sass and was hoping someone could help? The following doesn't work:
.custom-select-value {
&--companies.&--companies-disabled::after {
// Styles
}
}
Also, just wondered as I was writing this - what's the main element of a pseudo element called? "Parent" doesn't seem quite right?
Thanks
Managed to get it working by typing the second selector out in full:
.custom-select-value {
&--companies.custom-select-value--companies-disabled::after {
// Styles
}
}
I am using selector to select all elements not having one class:
.list th:not(.foo) {
/* some rules */
}
How can I apply this to more than one class?
.list th:not(.foo), .list th:not(.bar) {
/* some rules */
}
The CSS above will not of course do that, I need something like this pseudo:
.list th:not(.foo and .bar)
Is it possible in CSS and how?
You can use as many :not() selectors as you like.
:not(.foo):not(.bar)
With upcoming CSS4 selectors you can use a syntax like:
:not(.class1, .class2, .class3)
and so on. But browser support isn't good so far. To be able to use it today, you can use cssnext for example.
.list th:not[class*="class"] { }
It will work with all classes, like class1, class2 etc.
Use comma to separate class name can get you want
.list th:not(.class1, .class2)
In my project, I have this convention of writing my css files like
.some_name_APP_CONTAINER <sub css rules...> {
}
.some_name_APP_CONTAINER <sub css rules...> {
}
.some_name_APP_CONTAINER <sub css rules...> {
}
etc...
So in the css file, I want to ensure that all the rules (including ones in media query) start with .some_name_APP_CONTAINER (is a class), and the substring some_name can be whatever class name but should be the same for all rules in the css file. So this is valid for example:
.some_name_APP_CONTAINER .table {
}
.some_name_APP_CONTAINER div {
}
.some_name_APP_CONTAINER div:hover {
}
and this is not valid
.some_name_APP_CONTAINER .table {
}
.some_name_APP_CONTAINER div {
}
div:hover {
}
So this is mainly for maintenance reasons, so that everything gets encapsulated under the class some_name_APP_CONTAINER. Is there some library anyone uses for validation of css rules?
Also I prefer node.js library as that would work best.
Thanks
You could use a CSS pre-processor to help you do that. Although they wouldn't parse the CSS to ensure the encapsulation you're looking for, they would make it really easy to implement such a structure and double check.
The two most popular are Sass and LESS.
CSS pre-processors allow you to nest your selectors. To "namespace" selectors you could do the following.
.some_name_APP_CONTAINER {
table {}
div {}
div:hover {}
}
Once the pre-processor compiles the above pseudo CSS you'll get the results you're looking for.
.some_name_APP_CONTAINER table {}
.some_name_APP_CONTAINER div {}
.some_name_APP_CONTAINER div:hover {}
Ensuring the results you want could be as simple as seeing if all the selectors in a file reside with the .some_name_APP_CONTAINER block/selector.
I have a class in my css called .btn:
.btn {
//stuff here
}
and I am going to create another class, lets say .btn2. I want to be able to inherit the characteristics from .btn into btn2, as I only want to change the color of button 2. Is there a way in CSS for this? Or should I just copy and paste the original stuff into the new class?
I'd suggest:
/* comma-separated selectors: */
.btn,
.btn2 {
/* shared properties */
}
.btn2 {
/* properties unique to btn2 */
}
JS Fiddle demo.
You can do it with dynamic stylesheets. Check out LESS or SASS.
EDIT:
Some additional info at a commenter's request. Here are the official sites. They both have examples on their home pages.
http://lesscss.org/
http://sass-lang.com/
What you can do is this
.btn, .btn2 {
/* Styles goes here */
}
This way, both the classes will share common properties defined in the rule block.
As far as the inheritance goes, something you would like to have..
.btn2 {
.btn; /* Won't work in pure CSS */
}
Won't work in pure CSS, you need to take a look at SASS or LESS
I have a very wierd question, I dont know wether if its possible in css or not
Suppose I have say 3 different css classes as shown below, as you can see I have a common property of all these classes, I want to declare this color somewhere else and pass a reference to it here, so if next time I want to change the color I can simply change at one place rather than changing in all the 5 classes.
I know that you can use body{}, or a wrapper for this but that would affect the colors of the entire site right ? Is there a way to do this ?
Is this even possible ?
.abc {
color:red;
}
.abc2 {
color:red;
}
.abc3 {
color:red;
}
.abc4 {
color:red;
}
.abc5 {
color:red;
}
The bad news: you can't do it in CSS.
The good news: you can write in a meta-CSS language like LESS, which then processes a LESS file to pure CSS. This is called a "mixin".
In LESS:
#errorColor: red;
.error-color {
color: #errorColor;
}
#error-1 {
.error-color;
}
.all-errors {
.error-color;
}
More info: http://lesscss.org/#-mixins
if you want to declare all of them at a time, you can use:
.abc, .abc2, .abc3, .abc4, .abc5 {
color:red;
}
Or you can declare an additional class & add to all the .abc, .abc2.... & make its color:red;.
This can not be done with CSS, but that is still a very popular thing to do by using a CSS preprocessor such as LESS, SASS, SCSS, or Stylus.
A preprocessor will let you define a variable (say $red = #F00). It will replace the variable in your CSS document with the variable value for you, allowing you to write very DRY and module CSS.
This functionality is referred to as "CSS variables", which is part of the future spec, but not yet implemented on any browsers.
For now, the best way to do this in pure CSS is to declare an additional class for the desired "global", and then add that class to all relevant items.
.abc_global { color: red; }
.abc1 { /* additional styling */ }
.abc2 { /* additional styling */ }
<div class="abc1 abc_global"></div>
<div class="abc2 abc_global"></div>
With LESS
You are able to define that red color once:
.myRedColor {
color:red;
}
Now you can call that red on any CSS styles. Even NESTED styles! It's a wicked tool!
.abc1 {
.myRedColor;
}
.abc2 {
.myRedColor;
}
.abc3 {
.myRedColor;
}
.abc4 {
.myRedColor;
}
NESTED EXAMPLE:
.abc {
.itsEasyAsOneTwoThree{
.myRedColor;
}
}
Now all of our "itsEasyAsOneTwoThree" classes that are properly nested inside of an "abc" class will be assigned the red style. No more remembering those long #867530 color codes :) How cool is that?!
You can also use PostCSS with the plugin postcss-preset-env and support custom properties/variables, then use the :root selector to add global css variables.
:root {
--color-gray: #333333;
--color-white: #ffffff;
--color-black: #000000;
}