In the following code I expected the title inside the wrapper to be blue but it stays red, I was hoping #custom-selector would act like regular css custom-property?
html
<div class="wrapper">
<h1 id="title">Title</h1>
</div>
css
#use postcss-cssnext;
#custom-selector :--heading h1, h2, h3;
:--heading{
color: red;
}
a:active{
color:hotpink;
}
.wrapper{
:--heading{
color: blue;
}
}
I realised nesting was not suported so
.wrapper :--heading{
color: blue;
works! Duh
Related
I am trying to create a basic CSS template for a project. It needs to support both a light and dark mode.
In the html, the body tag has data-layout-color attribute. I have some toggles that allow switching between light and dark, and it is updating this attribute. In my CSS sheet, I use the attribute selector for background color, and it works! Now I need to be able to set other elements color based on the light/dark mode, but that's not working as the individual element doesn't have the attribute. I don't want to add data-layout-color to everything, and then have to update it all with my js. Any suggestions?
HTML:
<body ng-controller="myApp" data-layout-color="dark" data-layout="topnav">
<button type="button" class="btn btn-primary">PRESS ME!</button>
</body>
CSS:
body[data-layout-color="dark"]{
background-color: var(--my-body-dark-bg);
}
body[data-layout-color="light"]{
background-color: var(--my-body-light-bg);
}
.btn-primary[data-layout-color="light" {
color: var(--my-white-light);
background-color: var(--my-primary-light);
border-color: var(--my-primary-light);
}
.btn-primary[data-layout-color="dark" {
color: var(--my-white-dark);
background-color: var(--my-primary-dark);
border-color: var(--my-primary-dark);
}
You could write your selectors such that the attribute selector remains on body:
/* primary button under a "light" layout parent */
[data-layout-color="light"] .btn-primary {
color: var(--my-white-light);
background-color: var(--my-primary-light);
border-color: var(--my-primary-light);
}
But I think a better idea would be to change the custom property values so you don't need the theme-specific selectors on child elements in the first place:
[data-layout-color="dark"] {
--button-color-bg: white;
--button-color-fg: black;
}
[data-layout-color="light"] {
--button-color-bg: black;
--button-color-fg: white;
}
.btn-primary {
background-color: var(--button-color-bg);
color: var(--button-color-fg);
display: inline-block;
padding: 0.25em 1em;
border: 1px solid grey;
margin: 0.5em;
}
<div data-layout-color="dark">
<div class="btn-primary">Dark Body</div>
</div>
<div data-layout-color="light">
<div class="btn-primary">Light Body</div>
</div>
With plain css you can write it like this
body[data-layout-color="dark"]{
background-color: var(--my-body-dark-bg);
}
body[data-layout-color="dark"] .btn-primary{
color: var(--my-white-dark);
background-color: var(--my-primary-dark);
border-color: var(--my-primary-dark);
}
body[data-layout-color="dark"] .btn-primary a{
text-decoration: underline overline #FF3028;
}
I suggest you use scss though. It will make your life easier. If you'r using visualstudio code just download Live sass complier and click watch sass in the bottom right corner.
Using scss you would write it like this:
body[data-layout-color="dark"]{
background-color: var(--my-body-dark-bg);
.btn-primary{
color: var(--my-white-dark);
background-color: var(--my-primary-dark);
border-color: var(--my-primary-dark);
a{
text-decoration: underline overline #FF3028;
}
}
.btn-secondary{
color: var(--my-white-dark-secondary);
background-color: var(--my-primary-dark-secondary);
border-color: var(--my-primary-dark-secondary);
}
p{
color: var(--my-white-dark);
}
}
body[data-layout-color="light"]{
background-color: var(--my-body-light-bg);
/*etc etc*/
}
I'm trying to apply this css:
#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
font-size: 22px;
color: white;
}
this works well, the problem is that the web app can set a class on the body called white-content, if the white-content class is setted, then I can't see the text of h2, because the color is white.
Is possible tell to css that the css above must be applied only when the white-content class is not availble on body?
Thanks in advance.
I've condensed the HTML for the sake of this example.
Test 1: Class does exist on body. h2 text should be default black.
body:not(.white-content) #calendar-page h2 {
font-size: 22px;
color: white;
}
<body class="white-content">
<div id="calendar-page">
<h2>My Header</h2>
</div>
</body>
Test 2: Class does not exist on body. h2 text should be white.
body:not(.white-content) #calendar-page h2 {
font-size: 22px;
color: white;
}
<body>
<div id="calendar-page">
<h2>My Header</h2>
</div>
</body>
if you use
body.white-content
that means "body and white-content" class at the same time.
So you can use:
#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
font-size: 22px;
color: white;
}
body.white-content #calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
color: black
}
So when body has .white-content it add that css rule.
See more on
https://www.w3schools.com/cssref/css_selectors.asp
yes it's possible by using DOM manipulation with javascript:
html:
<div id="div01" style="background-color: white">abc</div>
javascript:
if(div01.style.backgroundColor == "white")
{document.getElementById("div01").style.color = "black";}
I am trying to have 2 different colours/styles for each word of my website name, something like this:
I currently use:
James<strong>.</strong><span>Wood</span>
("STRONG" and "SPAN" tags inside "A" tag).
And then do the rest with CSS.
Is this the right method to do it with CSS if we can't use images?
Very similar to Gianps answer, but with a bit simpler CSS:
Working Demo:
http://www.cdpn.io/wvCou
HTML:
<a href="#" class='title'><span class='green'>James</span>.<span class='orange'>Wood</span></a>
CSS:
.title {
font-size: 18px;
text-transform: uppercase;
font-weight: bold;
color: red;
text-decoration: none;
}
.title .green {color: green;}
.title .orange {color: orange;}
That html code is not readable. It's right to do it with css but in a way like this:
<a href="#" class="f18 b">
<span class="green uc">james</span>.<span class="orange uc">wood</span>
</a>
and define css classes:
.f18 {font-size: 18px;}
.b {font-weight:bold;}
.uc {text-transform:uppercase;}
I am making a set of buttons for my site, and I am in need of some professional insight.
In order to reduce CSS bloat, I want to subclass my buttons for different colors, ex .button.blue .
Will the following incur issues in the future? (assuming I don't make a class of just .blue)
Do I have to use something like .button.button-blue instead?
.button {
display:inline-block;
padding: 9px 18px;
margin: 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
background: #FFE150;
}
.button.blue {
background: #49b8e7;
border:1px solid #54abcf;
border-bottom:1px solid #398fb4;
color:#FFF
text-shadow: 0 1px 0 rgba(255,255,255, 0.5);
}
.header{
height: 50px;
}
.header.blue {
background: blue;
color: #fff;
}
What you have there with the multi-classes will work fine assuming you want them to work like so:
<div class="button blue">
Will use .button and .button.blue
</div>
<div class="button">
Will only use .button
</div>
<div class="header blue">
Will use .header and .header.blue
</div>
<div class="header">
Will only use .header
</div>
<div class="blue">
Will use neither of the .blue declarations because it doesn't contain header or button.
</div>
A selector like .button.blue actually selects for an element with that has both "blue" and "button" as classes, not a class called .button.blue. See http://www.w3.org/TR/CSS21/selector.html#class-html.
You can use the .button.blue style rule you have listed, but you'll need to rearrange your HTML so that you have something like <button type="button" class="button blue"/>. However, you don't really need to have a button class since it being a button (or <input type="submit">, etc.) is enough to use in your selector. You could write a CSS rule that is simply button.blue, input[type=submit].blue{}
Seems like button.blue is enough.
The only difference between the two is if you use <button class="button blue">, or <button class="button button-blue">.
You even don't need to duplicate the painting in blue... You can just do something like this:
.button
{
// button style
}
.header
{
// header style
}
.blue
{
background: blue;
color: #fff;
}
Of course if you add the blue class to each of them. (<div class="header blue">and<button class="button blue">)
Combine the classes applying the color you want to theme.
HTML:
<input type="text" class="text-field-required default" .../>
<select class="autocomplete-drop-down blue">...</select>
<a href="#" class="button-link green" .../>
CSS:
.text-field-required {
//component css theme without colors
}
.default {
//default color css theme for any component
}
.blue {
//blue css theme for any component
}
.green {
//green css theme for any component
}
<style type="text/css">
.list .name{
font-weight:bold;
color:red;
}
.items .name{
clear:both;
}
</style>
<div class="list">
<div class="name">Products</div>
<div class="items">
<div class="name">Product Name</div>
</div>
</div>
In the above code, class ".list .name". the "name" is bold and color is red.
And ".items .name" is without bold and color.
What I need is, I don't need to overflow the ".list .name" color and bold to the class ".items .name". I want to break the 1st class in the beginning of ".items"
I need to use "name" in both div.
clear: both is nothing to do with removing earlier styles. Just use the inherit value on all the properties you change:
.list .name {
font-weight: bold;
color: red;
}
.list .items .name{
font-weight: inherit;
color: inherit;
}
.list > .name {
font-weight:bold;
color:red;
}
Should do the trick