Develop Reference

Changing the background colour of another element on click

I would like to add accessibility options to a website to give the user the chance to change the background of the following element (not the whole document background):
.ast-separate-container .ast-article-single {
background-color: #fffff0;
}
For example, I would like to display coloured boxes or text for:
Pink White Blue Yellow
and when the links are clicked the background colour changes.
Thanks in advance for any advice.

In this situation you should use JS and add event listener to this component:
element.addEventListener('click', function() {
element.classList.add(/* class with corresponding styles */)
});

Have a look at this code snippet, which uses javscript to achieve that:
var background = document.getElementById('background');
function setBackgroundTo(color) {
background.style.backgroundColor = color;
}
#background {
height: 100px;
width: 100px;
background-color: red;
}
The div below simulates your background. Click a button to change its color.
<div id="background"></div>
<button onclick="setBackgroundTo('red')">Red</button>
<button onclick="setBackgroundTo('blue')">Blue</button>
<button onclick="setBackgroundTo('green')">Green</button>
<button onclick="setBackgroundTo('#000')">Black</button>

Why does the Cascade for CSS Custom Properties Not Work? [duplicate]

This question already has answers here:
CSS scoped custom property ignored when used to calculate variable in outer scope
(2 answers)
Closed 4 years ago.
I have a full working CodePen here showing the problem. I'm using CSS custom properties like so:
:root {
--global-primary-colour-hue: 211;
--global-primary-colour-saturation: 100%;
--global-primary-colour-lightness: 50%;
--global-primary-colour-opacity: 1;
--global-primary-colour: hsla(
var(--global-primary-colour-hue),
var(--global-primary-colour-saturation),
var(--global-primary-colour-lightness),
var(--global-primary-colour-opacity));
}
.box {
background-color: var(--global-primary-colour);
height: 100px;
width: 100px;
}
Then I've set up a range slider and box to display the colour in my HTML:
<input id="hue-range" value="0" type="range" min="0" max="360">
<div class="box"></div>
Finally I want to use the range slider to drive the --global-primary-colour-hue property. I can get this to work like so:
var element = document.getElementById("hue-range");
element.onchange = function(){
document.body.style.setProperty(
"--global-primary-colour-hue",
this.value.toString());
// Why does the box stop changing colour when I comment out this line?
document.body.style.setProperty(
"--global-primary-colour",
"hsla(var(--global-primary-colour-hue),var(--global-primary-colour-saturation),var(--global-primary-colour-lightness),var(--global-primary-colour-opacity))");
}
My question is, why do I have to set the --global-primary-colour property? When I uncomment that last line, the colour in the box no longer changes.

In your script, you're setting the custom properties on the body element. However, in your stylesheet, your custom properties are all (as usual) specified for :root, the html element. So the value of --global-primary-colour-hue is unchanged for :root, and the value of --global-primary-colour in turn remains unchanged. This unchanged value then gets inherited by body and .box — the new value of --global-primary-colour-hue ends up never getting used.
Setting the property for document.documentElement in your script, or changing the CSS rule to target body instead, allows your code to work correctly without needing that last line:
var element = document.getElementById("hue-range");
element.onchange = function(){
document.documentElement.style.setProperty(
"--global-primary-colour-hue",
this.value);
}
:root {
--global-primary-colour-hue: 211;
--global-primary-colour-saturation: 100%;
--global-primary-colour-lightness: 50%;
--global-primary-colour-opacity: 1;
--global-primary-colour: hsla(
var(--global-primary-colour-hue),
var(--global-primary-colour-saturation),
var(--global-primary-colour-lightness),
var(--global-primary-colour-opacity));
}
.box {
background-color: var(--global-primary-colour);
height: 100px;
width: 100px;
}
<input id="hue-range" value="0" type="range" min="0" max="360">
<div class="box"></div>

Changing color of burger menu so that it is not the same at the background color underneath it

I am building a one page website that will have a fixed burger icon for opening the menu. The burger icon has a color the same as certain background colors of some of the pages. Thus when the burger icon is on these pages it will not be visible. I am looking for a way to be able to change the color of the burger icon when it is on the pages that have the same color.
Let's say the burger icon is normally blue, and the div underneath it is white, here the burger icon remains blue. but if the next div is blue when the burger icon reaches this div it changes its color to white.
My burger icon is an empty div with the below css to make it look like a burger icon. The burger icon is wrapped in an other div with a fixed position.
//HTML Code
<section class="buttonset">
<div id="nav_list"></div>
</section>
//CSS Code
.buttonset
{
height: 50px;
position: fixed;
top: 53px;
left: 55px;
z-index: 1;
}
#nav_list
{
cursor: pointer;
height: 30px;
width: 41px;
}
#nav_list:before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 24px;
height: 0.17em;
background: #71ADBE;
box-shadow: 0 6px 0 0 #71ADBE, 0 12px 0 0 #71ADBE;
border-radius: 2px;
}
What I want is to change the background color of the burger icon to a different color when the background color of the div underneath the it is the same as the background color of the burger icon.
i.e if(burger icon = blue & homePage = blue){ burger icon background color change to white; }
In order to achieve this, I think that the code has to be running continuously check what the background color of the pages are so that it will be able to change the color of the burger icon.
Is there any way this can be done? Maybe detecting what background color the page has using javascript or jquery and then changing the color of the burger icon?
Thanks

EDIT Based off update HTML and CSS I created another fiddle https://jsfiddle.net/snpsp6as/4/
This is checking to see if body color matches burger color and if so changes burger button to white.
var element = document.getElementsByTagName("BODY")[0];
var style = window.getComputedStyle(element, "");
var bgColor = style.getPropertyValue("background-color");
var color = window.getComputedStyle(document.querySelector('#nav_list'), ':before').getPropertyValue('background-color');
if (bgColor == color) {
document.styleSheets[0].addRule('#nav_list:before', 'background: white !important; box-shadow: 0 6px 0 0 white, 0 12px 0 0 white !important;');
}
Yes, see fiddle https://jsfiddle.net/snpsp6as/
This is looking for the background color blue and its if blue it will change the text to white
<div id="div1">
<h1 id="myH1">Blue</h1>
</div>
<script>
var element = document.getElementById("div1");
var style = window.getComputedStyle(element, "");
var bgColor = style.getPropertyValue("background-color");
alert("The background color is: " + bgColor);
if (bgColor === "rgb(0, 0, 255)") {
document.getElementById("myH1").style.color = "white";
}
</script>

Disclaimer: This is just General Code and will be updated when the question gets some Detail.
var bgcol = $(this).css('background-color');
We save the bgcolor of the background. in the example the background is selected as this.
$(this).css('background-color', bgcol);
Append the background to your burger in this example Burger is selected as this.

I would use the analysis of the color component that you want. Here's an example of the red color (if you had a red and a blue icon):
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<body style="background-color: #F00">
<P id=value></P>
<script>
var color = $('body').css("background-color");
var red = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)[1];
//if red is too intense, we might want to avoid using the red icon
// (although it would be fine on a white background)
if (red > 100) {
$('#value').html("too red - choose a blue icon");
} else {
$('#value').html("not too red - chose a red icon");
}
</script>
</body>
</html>

Programatically - no. At least not in such a fashion that will universally work across browsers and platforms. The most reasonable approach (and the one used by countless corporate websites) is to have two versions of the image, and call them accordingly using (probably) javascript with a simple if statement that checks the blue values of the background.
If the background is an image, that gets a bit trickier, and may require manual intervention per page.

Using what I could assume from the question, you are looking for a solution that automatically changes the background color based on whether the burger icon is there (lets go with visible).
if ($(".logo").css('display') == 'none') {
$("html").css("background-color", "yellow", "!important");
}
Theoretically, this should work if the logo is set specifically to none.
Otherwise, there is additional Javascript to identify if the logo is present and change it to none and if that is what you are looking for you will need to edit your question.
Fiddle Link

CSS Browser's text selection highlight color

Is it possible to get the browser's default (or themed, assuming there are browser themes? I've never looked) text selection color?
Background
I'm trying to make an <input type="date" /> act like it has a placeholder attribute, like the HTML5 <input type="text" /> does. In case it matters, I'm using Bootstrap.
So far, I've got
CSS
/* allow date inputs to have placeholders */
/* display placeholder text */
input[type="date"].emptyDate:before {
content: attr(placeholder);
color: #999;
}
/* hide default mm/dd/yyyy text when empty value and not in focus */
input[type=date].emptyDate:not(:focus) {
color: transparent;
}
/* hide default mm/dd/yyyy text when empty value, not in focus, and
selected (ctrl + a) */
input[type="date"].emptyDate::selection:not(:focus) {
color: transparent;
background-color: lightblue;
}
/* hide placeholder text when empty value, but in focus */
input[type="date"].emptyDate:focus:before {
content: "";
}
Javascript
function setEmptyDateInputClass(input) {
if ($(input).val()) {
$(input).removeClass("emptyDate");
} else {
$(input).addClass("emptyDate");
}
}
$(document).ready(function () {
$.each($("input[type=date]"), function (i, input) {
// set initial class
setEmptyDateInputClass(input);
// set class on value change
$(input).change(function () { setEmptyDateInputClass(this);});
});
});
Issues
I'm having two issues. The first, and the one I'm asking in this question (I'll post another question if everyone obeys the rules and no one posts answers to multiple questions) is, is there a way to get the browser's default (or themed) selection background color so that, either with CSS or manually with Javascript, the lightblue isn't static? (Also, light blue isn't the right color, but that's just a matter of a screenshot and mspaint.)
input[type="date"].emptyDate::selection:not(:focus) {
background-color: lightblue;
}
My second, bonus issue is, I'm having issues selecting :before::selection in order to set the background color of selected ::before content.
/* always active when .emptyDate */
input[type="date"].emptyDate::selection:before {
background-color: lightblue;
}
/* never active */
input[type="date"].emptyDate:before::selection {
background-color: lightblue;
}

You can use specificity on ::selection like so:
CSS
.red::selection {
background-color: red;
color: #fff;
}
.green::selection{
background-color:green;
color:#fff;
}
HTML
<span class="red">I am highlighted in red, </span>
<span class="green">and I am highlighted in green,</span>
<span class="">and I am highlighted as per browser default.</span>
Example: http://www.bootply.com/KEEvWSlP0F

How to inherit grandparent CSS not parent?

I have a feeling this won't be possible, but thought I'd ask anyway.
<body> //body uses 'back' background
<div id="div1"> //div1 uses 'front' background
<div id="child1"> //child1: no backgrounds, so shows 'front' background
</div>
</div>
</body>
My body element uses a background image. (I'll call it the back background image)
div1 uses a different background image (I'll call it the front background image), so the front background image covers over the main background image.
div1 contains a child div child1 that doesn't use any background images, so it just shows the background image of its parent i.e. it shows the front background.
I would like child1 to use the background of body and not the background of its parent div1. Because of the nature of the back background (it's a drawing, not a repeating pattern), I can't just apply the back background image to child1. I actually need a way to make a hole in div1's background so that child1 gets the back background image as its background, and not its parent's background.
So my question is: is there a way a div can inherit its grandparent's background, as opposed to its parent's background?
If this isn't possible with CSS, I'm open to javascript solutions.

This would be with using javascript and jQuery:
CSS
body {
background: url("Background 1");
}
#div1 {
background: url("Background 2");
}
#child1 {
background: url("Background 1");
}
JS
$(function() {
function positionBackground() {
var myChild1 = $("#child1");
myChild1.css({
backgroundPosition : "-" + myChild1.offset().left + "px -" + myChild1.offset().top + "px"
});
}
positionBackground();
$(window).resize(positionBackground);
});
Here is the fiddle: http://jsfiddle.net/gMK9G/

I don't think you'll be able to change the way that styles are inherited, that said, you shouldn't really need to.
This is a little rough, but you could use the same image on the child div as you're using on the body and just play with the background positioning to line it up.
Working Example
body {
background: url("Background 1");
}
#div1 {
background: url("Background 2");
}
#child1 {
background: url("Background 1");
background-position: 0px -125px; /* adjust as needed */
}

UPDATE 2 Elements in the DOM Cannot share the same background image, you can maybe apply the background image and position them exactly so that it looks like they are, but in reality it is not possible.
As far as I am aware this is not currently possible because css only has inherit and inherit "inherits" from it's parents and there is no way to customize that. Of course javascript can do this easily and I will provide a jQuery example only because you have the jquery tag.
$('.inherit-grandparent').each(function( element ) {
var $this = $(this),
property = $this.attr('grandparent-property'),
value = $this.parent().parent().css(property);
if(property && value) $this.css(property, value);
});
Usage
<div class="inherit-grandparent" grandparent-property="background"></div>
Demo: http://jsfiddle.net/aKHfr/
So not only will this solve your problem, but it's dynamic so you can use it on any element and request any property.
Update:
Here is a jQuery Plugin version, if you would prefer that.
jQuery.fn.inheritGrandparent = function( property ) {
var $this = $(this),
value = $this.parent().parent().css(property);
if(property && value) $this.css(property, value);
};
Usage:
$('#test').inheritGrandparent('background');
Demo: http://jsfiddle.net/aKHfr/2/
Happy Coding!

My HTML:
<div class="p1">
<div class="p2">
<div class="p3">
GandSOn
</div>
</div>
</div>
My css:
.p1 {
disapley: flex;
}
.p2{
display:inherit;
}
.p3 {
display:inherit;
}