I have a class named .color-blue with color:blue !important.
And I have a class inputContent with an input and a div, like this:
<div class="inputContent">
<input>
<div class="icon color-blue" style="color:red !important;">TEST</div>
</div>
and I want on input focused, .icon become the color of the class without put color:blue !important in inputContent or other.
I have tested
.inputContent input:focus ~ .icon {
color:inherit;
}
but nothing.
You can do it with jquery:
$("input").focus(function(){
$(".icon").attr("style", "color:blue");
});
try this one:
<style>
.icon{
color: red;}
input:focus + .icon{
color: blue;
}
</style>
<div class="inputContent">
<input>
<div class="icon">TEST</div>
</div>
I just want to "remove" or "cancel" the color of style="color:red !important;" and replace the color by the class color-blue without add lines like color:blue;
Related
Here's a fiddle of what I've tried and what I want to do:
#child {color:white;}
#parent::after{
content:"This";
color:black;
}
#parent::after:hover + #child{
color:black;
}
#parent::after:hover ~ #child{
color:black;
}
<div id='parent'>
<span>Change child color when you hover</span>
<div id='child'>
Color
</div>
</div>
When I hover the ::after of the #parent, I want to change the color of #child.
Is this possible to do with pure CSS, or do I have to use js?
pointer-events can help you here
#child {
color: white;
}
#parent *,
#parent{
pointer-events: none; /* disable for parent and all childs */
}
#parent::after {
content: "This";
color: black;
pointer-events: initial; /* keep it for the pseudo element */
}
#parent:hover #child { /* the pseudo element will trigger this hover */
color: black;
}
<div id='parent'>
<span>Change child color when you hover</span>
<div id='child'>
Color
</div>
</div>
You can do this like that way... For child element you can't use + or ~ sign. It's used for siblings not child.
#child {color:white;}
#parent::after{
content:"This";
color:black;
}
#parent:hover #child{
color:red;
}
#parent:hover::after{
color:blue;
}
<div id='parent'>
<span>Change child color when you hover</span>
<div id='child'>
Color
</div>
</div>
I would like to display apple in green color (bg color) instead of mango in red colour (bg color) on click on the mango, I know it's possible with hover or using javascript. Is there any way to do it with css on mouse click?
#two
{
display:none;
}
#one
{
background-color :red;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="hov.css">
</head>
<body>
<div id="one">
<p>mango</p>
</div>
<div id="two">
<p>apple</p>
</div>
</body>
</html>
I think you can't do what you want with only CSS, but you can use the :active selector to change it while clicking on it.
See that: http://www.w3schools.com/cssref/sel_active.asp
It depends on what you mean by "click" and "display".
If you mean can you toggle the appearance of the "apple" div by just clicking the "mango" div, then NO...you need javascript.
However, if you just want to see the "mango" div while the mouse button is clicked and held down, then the pseudo-class :active is what you require...in conjuction with a suitable sibling selector.
#two {
display: none;
background: green;
}
#one {
background-color: red;
}
#one:active + #two {
display: block;
}
<div id="one">
<p>mango [click and hold]</p>
</div>
<div id="two">
<p>apple</p>
</div>
Note: This selector only works on siblings...it will not work on the p tag to affect the "apple" div.
which is best to use js for the click purpose.
CSS Only Solution
here is a simple hack to create the click functionality using css
for this purpose.here is a simple hack using checkbox and label.
label {
display: block;
background: red;
}
label:after{
content: "Mango";
}
#demo:checked + label {
background: Green;
color: white;
}
#demo:checked + label:after{
content: "Apple";
}
.hide{
display:none;
}
<input type="checkbox" id="demo" class="hide"/>
<label for="demo"></label>
I'm trying to change the background color of the selected item but can't get it work.
HTML:
<table class="select_payment_method_table">
<tr>
<td class="payment_details_cc">
<input id="visa1" type="radio" name="visa1" value="a1" checked="checked"/>
<span class="visa_card_img"> Credit Card (VISA / MasterCard)</span>
<div class="clearfix"></div>
<div class="payment_img_main"><img src="image.png"></div>
</td>
</tr>
I tried this, but it doesn't work:
CSS:
.select input[checked]
{
background-color:white;
}
Your syntax is a bit wrong (assuming you do have a .select class, because it's not in your HTML):
.select input:checked
{
background-color:white;
}
For further reading on :checked selector
If you want to select the radio element itself, you could use this:
input[type="radio"]:checked { background-color: blue; }
If you wish to select the background of the element text next to the radio element, then you could use this:
input[type="radio"]:checked+span { background-color: blue; }
And combine the rules if you want both. Hope that helps.
input:checked
{
background:#ff0000;
}
There is no class called select. This style is supported only by Opera.
Consider the following HTML:
<div class="a">
<div class="b">Hello</div>
</div>
<div class="c">
<div class="b">World</div>
</div>
Adding the following CSS colors only "World" in red, as expected:
.c .b {
color: red;
}
But, adding the following CSS instead colors both "Hello" and "World" in red:
:not(.a) .b {
color: red;
}
Why?
You need to give it like this:-
Demo
div:not(.a) .b {
color: red;
}
Pseudo-class :not
Syntax is selector:not(){ properties }
Since the :not pseudo-class represents an element that is not represented by its argument,
you have to specify the element you want to exclude before the :not selector
Per your example, try this instead:
div:not(.a) .b {
color: red;
}
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
}