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.
Related
Say I have this custom button:
<div class="button-container">
<p class="button-text">Click me</p>
</div>
I want the div to have a background color, and the text to have a color in SCSS.
But I also need a different background color and text color when I'm hovering the whole div (not just the p tag and div separate, only when hovering the div)
I could write something like this:
div.button-container{
background-color: white;
p{
color: black;
}
&:hover{
background-color: red;
p{
color: blue;
}
}
}
But this does not look like a good idea, since this will become very complex and hard to manage if there are more elements involved. What is the best solution here?
I don't know exactly what the code I want would look like since I'm pretty new to SCSS, but I am thinking it would look something like this: (ignore syntax here, just an idea of how much shorter I would like it to be)
div.button-container{
background-color: white, red;
p{
color: black, blue;
}
}
Based on the html you have provided the following scss will be just fine:
.button-container {
background-color: black;
color: white;
&:hover {
background-color: gray;
color: black;
}
}
If there are several items involved, you can create some mixins that can be reused. For example. if there are several button-container elements that share the same style in the app, I will make something like this:
#mixin btnContainerBlack {
background-color: black;
color: white;
&:hover {
background-color: gray;
color: black;
}
}
In this case, you will simply add the mixin name to the element style:
.button-container {
#include btnContainerBlack;
}
There are many ways to make scss more clean and reusable. This is just one of the ideas.
I'm playing around with styling symbols and want to try to style this header by giving each of the dots between the letters the colors of the actual FRIENDS logo. I wanted to know what would be the best way to do this. Can symbol colors be changed in HTML? If yes, is making p tags with different ID's the only way to style the dots? Here is the header:
<header> F•R•I•E•N•D•S </header>
Note: I would only like to use HTML and CSS to do this not Javascript or JQuery
You can use span tags which have class attributes and according CSS rules for the classes (which can be reused)
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
.yellow {
color: yellow;
}
.orange {
color: orange;
}
.brown {
color: brown;
}
<header> F<span class="red">•</span>R<span class="blue">•</span>I<span class="green">•</span>E<span class="yellow">•</span>N<span class="orange">•</span>D<span class="brown">•</span>S </header>
I'd recommend that you surround each symbol with a <span> tag and target it individually with an "id".
It'd look something like this:
<header> F<span id="red">•</span>R<span id="blue">•</span>I&<span id="green">#8226;</span>E<span id="yellow">•</span>N<span id="orange">•</span>D<span id="brown">•</span>S </header>
You wouldn't want to use <p> tags to style the symbols because they would create new lines between each letter.
Just put every later or desired sign into span tag and color it with class or inline style attributes as seen on last two latters in code.
.red{
color: red;
}
.blue{
color: blue;
}
.green{
color: green;
}
.brown{
color: brown;
}
.orange{
color: orange;
}
<header> <span class="red">F</span>•<span class="green">R</span>•<span class="brown">I</span>•<span class="blue">E</span>•<span style="color:yellow">D</span>•<span style="color:gray">S</span> </header>
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?
I am styling the .button1 class with its own ruleset. Additionally, I have a separate ruleset for the :hover pseudo-class using the CSS selector .button1:hover
But I wish to define the :hover pseudo-class styling within the existing .button1 ruleset.
Currently:
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
Desired:
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
hover:background-color: #4CAF50;
}
Is it possible to do anything like this?
Here is link https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_hover
CSS
This is impossible to do with pure CSS. :(
.button1 and .button1:hover are different CSS selectors.
With CSS, if you want to apply unique styling to the hover-state, then it must have a separate ruleset:
.button1 { background: red; }
.button1:hover { background: pink; }
CSS preprocessors
However, there are a handful of CSS preprocessors that allow us to write style-rules using special syntaxes that allow nesting similar to what you wish to accomplish.
For instance, here is "SCSS" syntax that the Sass preprocessor uses:
.button1 {
background: red;
&:hover {
background: pink;
}
}
On their own, these intermediate syntaxes will not run in the browser, so in the end, a special interpreter (preprocessor) must be used to "process" and translate the special syntax into real CSS that the browser can actually load.
Some popular preprocessors:
Sass
Less
Stylus
PostCSS
If you want to add hover to any class the format is
You can not add it inside .button class
.button1:hover{
background-color: #4CAF50;
}
Here is an example to get hovering effect -
<style>
.btn{
/* Style your button */
}
.btn:hover{
/* Add hovering effect to your button */
}
</style>
<button class="btn">Green</button>
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;
}