Is there a tool out there that allows you to combine CSS classes? It seems handy to combine them in something like Tailwind css, but is there a way to "add them up" in the css? Sass has the #extend which is similar to what I'm thinking. But is there something out there that looks like this:
HTML:
<div class="author"></div>
CSS:
.card {with: 100px; height: 100px;}
.green (background-color: green}
.author { .card + .green }
or maybe
.author = .card.green
Then with more classes, it'd end up something like:
.author,
.staff,
.jockey = .card.green.padding-large.centered.motif-top
Does this exist?
You can do so with the help of Less.css. Just add this <script> tag to your HTML file:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js" ></script>
And add a <link> to an external stylesheet like this (this is not needed, but Less is less buggy if written in an external file .less rather than inside <style> tags in HTML):
<link rel="stylesheet/less" type="text/css" href="styles.less" />
Now, this example you provided:
.card {width: 100px; height: 100px;}
.green (background-color: green}
.author { .card + .green }
Can be written in Less as:
.card {
width: 100px;
height: 100px;
}
.green {
background-color: green;
}
.author {
.card();
.green();
}
And the second example of:
.author,
.staff,
.jockey = .card.green.padding-large.centered.motif-top
Is written in Less like:
.author, .staff, .jockey {
.card();
.green();
.padding-large();
.centered();
.motif-top();
}
Hopefully this helped you, and go to the official website to learn more about Less CSS (Learner Style Sheets)
This is the pure CSS way, but syntax is slightly different and you don't need the first line:
.author {} /* 1st line is not required*/
.author, .class1 {
width: 100px;
}
.author, .class2 {
height: 100px;
background-color: black;
}
<div class="author"><div>
More Information here: Can a CSS class inherit one or more other classes?
Related
This question already has answers here:
CSS Selector "(A or B) and C"?
(5 answers)
Closed 3 years ago.
I have tons of CSS code I may have a better way to write.
For example, I want to make H1 tags red on very specific places on the HTML page.
.format-seven.blue #page-content h1,
.format-seven.green #page-content h1{
color: red;
}
I could have used:
h1{
color: red;
}
But, I really need the specificity of all the ".format-seven.blue #page-content" part and the ".format-seven.green #page-content" in this case.
Note the "green" and "blue" part.
It would be nice if I could do something like:
.format-seven.[green|blue] #page-content h1{
color: red;
}
Is there such a thing?
No unfortunately there is not in vanilla CSS. If you are concerned about how much you need to write, the big CSS Preprocessors have tools for scripting the generation of your stylesheets
Here is a link to a great CSS Preprocessor (SASS)
Why don't you just create classes for your colors and then add them straight to the tags you want to change color for, like so:
.redText {color: red;}
.blueText {color: blue;}
and your markup:
<div class="format-seven blue">
<div id="page-content">
<h1 class="redText">Your Header</h1>
</div>
</div>
I suggest you use a CSS preprocessor (Sass, Less, ...) as #nathan-fries told.
Then you can do something like that:
.format-seven {
&.blue, &.green {
#page-content h1 {
color: red;
}
#something-else {
background: red;
}
}
&.yellow, &.black {
#page-content h1 {
color: yellow;
}
}
}
It will be compiled to:
.format-seven.blue #page-content h1,
.format-seven.green #page-content h1 {
color: red;
}
.format-seven.blue #something-else,
.format-seven.green #something-else {
background: red;
}
.format-seven.yellow #page-content h1,
.format-seven.black #page-content h1 {
color: yellow;
}
If you're coding with Visual Studio Code, I suggest using Less Compiler extension to compile less files on save.
I have n number of styles in .css file.
I am using .Net MVC application
assume :
.a{}
.b{}
.c{}
My html is like
<div id='blockA'>
--- nested div containing classes a , b, c
</div>
<div id='blockB'>
--- nested div containing classes a , b, c
</div>
if i want those styles to be applicable for blockA. i can do like this
#blockA .a{}
#blockA .b{}
#blockA .c{}
is there any other way to specify it for a group of styles ?
#blockA
{
.a{}
.b{}
.c{}
}
CSS does not allow nesting rules - this is a feature of CSS preprocessors like SASS and LESS.
Both allow for this:
#blockA {
.a { color: blue; }
.b { color: red; }
.c { color: green; }
}
If you need to achieve the same result using native CSS only, you need to do it the following way (which is exactly what those preprocessors compile your code to):
#blockA .a {
color: blue;
}
#blockA .b {
color: red;
}
#blockA .c {
color: green;
}
If the rules for .a .b and .c are the same:
#blockA {
.a, .b, .c { color: black; }
}
gets compiled to
#blockA .a,
#blockA .b,
#blockA .c {
color: black;
}
Please note that since any preprocessor will have to compile to native CSS, none of them allows you to do stuff you couldn't achieve with native CSS.
Yes you should use css preprocessors like SASS, LESS
then you could define like you mentioned in the .scss / .less file.
#blockA
{
.a{}
.b{}
.c{}
}
I'm using <paper-progress-button> in a project, and I want to style it from my main stylesheet but can't get it to work.
The styling code for <paper-progress-button> looks like this:
<dom-module id="paper-progress-button">
<template>
<style>
:host {
display: inline-block;
}
.button {
#apply --paper-progress-button-button;
}
.button:not([disabled]) {
#apply --paper-progress-button-button-active;
}
.spinner {
margin-left: 10px;
#apply --paper-progress-button-spinner;
}
[hidden] {
display: none;
}
</style>
...
I've tried all sorts of ways to get my styles from a main site-level stylesheet to affect the button, but none seem to work:
main.css
--paper-progress-button-button {
background-color: red;
}
main.css
* {
--paper-progress-button-button {
background-color: red;
};
}
custom_style.html
<custom-style>
<style is="custom-style">
--paper-progress-button-button {
background-color: red;
}
</style>
</custom-style>
custom_style.html
<custom-style>
<style is="custom-style">
:root {
--paper-progress-button-button {
background-color: red;
};
}
</style>
</custom-style>
The documentation for styling Polymer 2 is huge, but doesn't even mention #apply once! So how do I really style that button from my site-level stylesheet?
Polymer currently only shims CSS properties within a custom-style or a Polymer element's style; and not from an external stylesheet.
Also note the style usage is incorrect, as the CSS property name must be followed by a colon:
.my-div {
--paper-progress-button-button: {
background-color: red;
};
}
demo
I have some rules nested inside each other, and I'd like to add another unrelated element to one of the rules.
For example if I have
#element1{
display: block;
.sub-element1 {
background: yellow;
.sub-element2 {
color: red;
}
}
}
and then I'd like to add another element (#element2) to use same rules as .sub-element2, so compiled code would look like this:
#element1{
display:block
}
#element1 .sub-element1 {
background:yellow
}
#element1. sub-element1 .sub-element2, #element2 {
color: red;
}
Is it possible?
You could use a mixin. You can add rules to a mixin, then include the mixins where you want them:
#mixin redcolor {
color:red;
}
Then simply include this mixin in any selector:
.subelement2, #element2 {
#include redcolor;
}
More on mixins here:
http://sass-lang.com/guide
Use #extend.
#element2 {
#extend .sub-element2
}
The output created by this will however also copy the selector chain, so this would be the output:
#element1. sub-element1 .sub-element2, #element2 {
color: red;
}
Perhaps that is what you want, but I can imagine it's not.
In this case you'll need to write an #extend only selector. It works much like an #include, except it generates the compact output you outline in your question. You could do it many ways, this is one of them:
%red {
color: red;
}
#element1{
display: block;
.sub-element1 {
background: yellow;
.sub-element2 {
#extend %red;
}
}
}
#element2 {
#extend %red;
}
Here's a link to it in the official docs.
I am trying to create a banner for my site without using an image. However, that banner is also a link.
Is there a way for me to override the use of the "a" (link) CSS styling from my div?
Assume the CSS looks like this:
a:link, a:visited {
color: #176093;
}
#logo {
color: red;
font-size: 48px;
}
In other words, I'd like the CSS definitions for #logo to override the definitions for links.
Converting comments to answer:
Using this, you can specify styles within a given container:
#logo a {
color: red;
/* ... */
}
If you only want to apply your styles to the anchor within the div #logo, you have to use a selector like this:
#logo a {
color: red;
font-size: 48px;
}
If the HTML is like this;
<div id="logo">Banner Text</div>
then use CSS
#logo a:link, #logo a:visited{color:#176093;}
If HTML is like this
<a id="logo" href="#">Banner Text</a>
Then use CSS
#logo:link, #logo:visited{color:#176093;}
Your issue is the specificity of your selectors :link and :visited, you should override those as well:
#logo {
font-size: 48px;
}
#logo:link, #logo:visited {
color: red;
}