When I unite class and class (or id and id, it doesn't matter), why the changes apply for only one element?
Example: picture and text under picture:
.photo
{
width: 230px; height: 230px;
margin: 15px;
}
.photo:hover + .name
{
color: black;
}
.name
{
text-align: center;
color: transparent;
}
.photo:hover + .name {
color: black;
}
Example:
div {
width: 50px;
height: 50px;
color: blue;
}
.photo:hover + .name {
color: black;
}
<div class="photo">.photo</div>
<div class="name">.name</div>
This code means: when elements with class photo are hovered, and the next element on the same level has class name, the color of element with class photo will be changed to black.
If you want to apply the same CSS rules to multiple tags/IDs/classes, you need to use comma, like this:
.photo:hover, .name {
color: black;
}
Example:
div {
width: 50px;
height: 50px;
color: blue;
}
.photo:hover, .name {
color: black;
}
<div class="photo">.photo</div>
<div class="name">.name</div>
In this case, black color will be applied to elements with name class, and to hovered elements with photo class.
the + is not used to select a common style for both the classes. '+' is the symbol for the adjacent sibling selector it selects all elements that are the adjacent siblings of a specified element. if u want to add some common style to both the classes then just seperate both classes with common like .photo:hover , .name {color: black;} or you can use some common words in the class name like instead of photo you can write "photo color" and instead of name "name color" and then style it by using .color{color: black;} in this case black color will be applied to both of your classes or you can use attribute selector with common class name [class*="color"]{color: black;} this will also do the same effect.
Related
I want to know if is there a way to select dynamically an element with same prefix of class but different suffix. Ex:
HTML
<div class="bg-primary-light"></div>
<div class="bg-primary-dark"></div>
CSS
.bg-primary-light { background-color: #fff }
.bg-primary-dark { background-color: #000 }
Is there a way to select for example
.bg-primary {
height: 100px;
.-light { background-color: #fff; }
.-dark {background-color: #000 }
}
`
Just to keep the "parent" properties
You can use the attribute selector with the *= operator to select elements by its partial class name
[class*="bg-primary"][class*="-light"] { background-color: #fff; }
[class*="bg-primary"][class*="-dark"] { background-color: #000; }
I am using WordPress so I wrote the custom color to change the background color of the box on hover but it's not working
#project1 {
height: 100px;
width: 33.33%;
background-color: red !important;
}
#project1:hover {
background-color: blue;
color: white;
}
<div id="project1"></div>
The !important rule is not being overwritten by a new rule that does not have !important.
Either remove !important from the first declaration, or if you absolutely have to keep it there, add it also to the :hover declaration.
#project1 {
height: 100px;
width: 33.33%;
background-color: red !important;
}
#project1:hover {
background-color: blue !important;
color: white;
}
<div id="project1"></div>
Try Removing !important from first rule
#project1{
background-color: red;
}
#project1:hover {
background-color: blue;
color: white;
}
Also, tend to avoid putting !important, rather do the override with better combination of parent selectors.
<a>Link</a>
Can we prevent this element from having any hover effect without usin :hover?
I usually go:
a {
color= white;
}
a:hover {
color= white;
}
I've checked pointer-event= none; but it disabled the entire element and made it text.
You have some syntax error in your CSS, Please update your CSS with following code:
a, a:hover {
color: white;
}
a {
color: white !important;
}
/*
So you can actually see the white link
*/
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
or if you don't want to use :hover you just add !important in your default CSS
a {
color: white !important;
}
Note: for standard practice we don't use !important frequently. So you can add this css inline. You can check updated code below..
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
First of all. Don't use = inside CSS but use : instead.
To disable the hover (animation) do this:
a, a:hover {
color: white;
text-decoration: none;
}
a:hover {
cursor: text;
}
However, if you assign a href attribute the link will still be clickable.
This you cant disable by css but you need javascript or jquery for that.
Example
test
I need some 'derivative' css which is a child of my parent css. I want to import all of attributes of 'parent' css to my 'child' css.
I can't find a solution.
E.g.
.red {
color: red;
}
.more_red {
color: red;
border: 2 px solid red;
}
Is it possible to do something familar my pseudocode?
.red{
color: red;
}
.more_red <SOME TEXT WHICH SAYS 'THIS CSS IS A CHILD OF .red'>{
border: 2px solid red;
}
HTML
<p class='more_red'>texty text</p> <- this only I Need
<p class='red more_red'>texty text</p> <- not this
EDIT I need to create a css which consists of all of 'parent' css properties.
Only way to inherit/importing the styles defined in one rule to another in CSS is cascading. You cannot use extend as in LESS in CSS.
For inheriting the properties from other element, the parent-child hierarchy is necessary.
You can use direct child selector >
.red {
color: red;
}
.red > .more_red {
border: 2px solid red;
}
or descendant selector
.red .more_red {
border: 2px solid red;
}
By doing this, the styles of parent are inherited by children.
You can also use global selector *.
Ex. For setting the font-family across the site
* {
font-family: Helvetica;
}
You can also use element/type selector.
Ex. To set the style of all the anchors
a {
text-decoration: none;
color: #ccc;
}
a:hover {
text-decoration: underline;
}
I've got a css buttons style and some predefined colour styles. I use colour classes to colour things the same colour and a button style to make the buttons round.
How do I add a hover style to my buttons to change the colour to a lighter shade? I thought it would be as simple as .class class2:hover {etc} but it doesn't work for some reason.
Here's a fiddle I prepared to demonstrate:
http://jsfiddle.net/7n4Wy/
HTML
<p class="red button">Test</p>
<p class="blue button">Test</p>
<p class="red"> Not a button </p>
CSS
.red {
background: red;
}
.blue {
background: blue;
}
.button {
border-radius: 6px;
}
.button:hover .red:hover {
background: pink;
}
What you have is trying to match .red:hover that is inside .button:hover, which implies a nested element in your markup.
Since you're selecting the same element, you need to combine both classes with a single :hover:
.red.button:hover {
background: pink;
}
Updated fiddle
You can apply a CSS-rule to multiple selectors (classes like «.button», or states like «:hover») by separating them with a comma.
therefore just add a comma:
.button:hover, .red:hover {
background: pink;
}
Use following code JSFIDDLE
.button.red:hover {
background: pink;
}
To apply multiple classes, don't add a space (just use another period):
CSS
p.button {
border-radius: 6px;
}
p.red {
background: 6px;
}
p.button.red:hover {
background: pink;
}
HTML
<p class="button red">Hover Here</p>
The space is used to denote a child element. i.e. p.button red:hover would affect all elements with class red on hover that are wholly contained in parent paragraphs with class button.