What I want is like this code:
class1:hover {
background-color: #f9f9f9;
box-shadow: 1px 1px 8px #E0DADF;
class2 {
opacity:0.5;
}
}
Is this even possible or there is any other way to make it like this?
.class1:hover {
background-color: #f9f9f9;
box-shadow: 1px 1px 8px #E0DADF;
}
.class1:hover .class2 {
opacity: 0.5;
}
Or use a CSS preprocessor.
You'll need to use SASS or LESS.
In case of SASS, or SCSS, yeah this is possible. But if you want to nest the CSS Classes, you can do this way:
class1:hover{
background-color:#f9f9f9;
box-shadow: 1px 1px 8px #E0DADF;
}
class1:hover class2{
opacity:0.5;
}
Just to add something.
What you can also do, is make the element have multiple classes. For example,
<div class="class1 class2"></div>
<div class="class2"></div>
The first div element would also have the css styles of the second.
Related
Imagine I have this:
.class1 {
color: white;
}
.class2 {
background-color: black;
}
I can use both classes and use both properties the color and the background-color like this:
<p class="class1 class2">text</p>
But now imagine this:
.bottom {
box-shadow: 0 1em red;
}
.top {
box-shadow: 0 -1em red;
}
I want to use both box-shadows without a need to a new class like .bottom-top or .top-bottom. If I use a new class, other people wouldn't know what order the words needed to be unless I created the two classes that do the same thing. Imagine I want a .left and .right classes too, I would need to have at least (2^n)-1 classes (n being the initial number of classes).
I first thought I could use the box-shadow: inherit, <shadow>; so it uses the box-shadow it already has plus the new one but it does not look like it works.
Is it even possible to do this in CSS?
Thanks in advance!
Yep, pretty straightforward. You can't have 2 different box shadow rules as the last one will overrule the first one because of the cascade. You can use .class1.class2 and then override both with an additional box shadow rule see below
/* this is just to make stuff visible */
body {
background-color:skyblue;
}
div {
margin-bottom:3rem;
color:red;
}
/*end*/
/*This is the example*/
.class1 {
color: white;
box-shadow: 0 1em 5px red;
}
.class2 {
background-color: black;
box-shadow: 0 -1em 5px green;
}
/*apply both box shadows when both classes are present */
.class1.class2 {
box-shadow: 0 -1em 5px green, 0 1em 5px red;
}
<div class="class1">Class1</div>
<div class="class2">Class2</div>
<div class="class1 class2">Class12</div>
Is there a way to use SASS/CSS to set a style for an element that has a common class as well as another. For example, I would like the border to appear for elements that are either:
<div class="plate eggs"></div>
<div class="plate bacon"></div>
but not:
<div class="plate"></div>
The code I have at the moment but I'm sure there's a way to combine the two rules?
.plate {
border: none;
&.eggs {
border: 1px solid red;
}
&.bacon {
border: 1px solid red;
}
}
SCSS:
.plate {
border: none;
&.eggs,&.bacon {
border: 1px solid red;
}
}
SASS:
.plate
border: none
&.eggs,&.bacon
border: 1px solid red
You can validate your styles in sassmeister.
Why not add another class ? But if that's not the case, I'd use :not([class]) . Ormaybe even further, you can consider using div[class^="eggs"]
I have a default a:hover styling however for certain things I have written a separate button class for when I want something to display as a button.
I wish for this:
.AeroButtonSlim hover
{
color: #FF0000;
cursor:pointer;
box-shadow: 1px 1px 10px 1px #42C0C4;
opacity: 0.70;
}
to override the default one, but I don't want to constantly use the !important feature.
AeroButtonSlim:hover` not space
.AeroButtonSlim:hover
{
color: #FF0000;
cursor:pointer;
box-shadow: 1px 1px 10px 1px #42C0C4;
opacity: 0.70;
}
I have the following problem, i need the "ul[editable] li" class to be dominant over "#menu li". I know I can use !important as follows:
#menu li {
border:solid 1px #9f693a;
outline:solid 1px #89552a;
background:url(images/bg.png);
}
ul[editable] li {
background-color: #333333 !important;
border-color: #0d0d0d !important;
color:#fff !important;
}
I want to say something like this:
ul[editable] li !important {
....
}
Is there a way to do this?
Thanks!
Nope, you cannot use the !important statement in the selector. The only thing you can do is make the second selector more specific, (Or the first one less specific of course).
For example:
#menu li {
border:solid 1px #9f693a;
outline:solid 1px #89552a;
background:url(images/bg.png);
}
#container ul[editable] li {
background-color: #333333;
border-color: #0d0d0d;
color:#fff;
}
I guess you already knew this though. :)
The background color, font color and border are being lost when I drop an element.
How do I keep these properties intact? Here is the project in jsFiddle:
http://jsfiddle.net/n2learning/tV4n7/48/
Thanks!
Just needed a minor change to your CSS. I've removed the #routinefilter from this rule so it applies to all .droptrue elements, no matter what their parent element is:
.droptrue{
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Here's the working example.
Your CSS rule:
#routinefilter .droptrue{
only applies to elements with a class droptrue WHILE they are in the container routinefilter. Once you drop them in the box, they are no longer inside routinefilter and the rule doesn't apply. Try changing that to just:
.droptrue{
Your CSS selector was specific to the point of origin, but not to the dropping-point. Add #dropTargetframe .droptrue to your selector, to give:
#routinefilter .droptrue,
#dropTargetframe .droptrue {
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Updated JS Fiddle.
Or you could simply remove the ancestor id from the selector, to give simply:
.droptrue {
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Updated JS Fiddle demo.
This should do the trick.
#routinefilter .droptrue, #dropTargetframe .droptrue{
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
The .droptrue elements will keep the same css style when inside the box as well!
Edit:
You can also change it to only .droptrue if you want those boxes to use this style wherever they are.
Change
#routinefilter .droptrue
into
.droptrue
Edit: Whoops, too late :)
Add to CSS
.droptrue
{
font: 16px serif
background: none repeat scroll 0 0 lightgray;
border: 2px solid #666666;
color: navy;
margin: 10px;
padding: 5px;
}