Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Is it possible to do something similar to this in CSS:
.class1:checked + class2{
.sidebar{
color:blue;
}
}
In the case of class1 being checked, look at it's sibling(class2) and change #sidebar's color to blue.
yes, you can target a class inside of CSS statement by using SASS features. First you should Learn SASS.
Nesting feature:
SCSS Syntax:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Output:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
in CSS you could do something like :
.class1:checked + .class2 > .sidebar {
color : blue
}
If the checkbox with class="class1" is checked, class="class2" his child, class="sidebar" will adept the blue color.
Here is a working Codepen
It worked for me this way!! Now it depends, how are you actually using your code, or how you have written your HTML.
/* by default, next text is red */
.class2 {
color: red;
}
/* if checked, next text is green */
.class1:checked + .class2 {
color: green;
}
#sidebar {
color: pink;
}
/* if checked, next text is blue and its child gets below CSS */
.class1:checked + .class2 #sidebar {
color: blue;
border: 1px solid #f00;
display: inline-block;
}
<label for="check">we are trying to make your code work</label>
<input type="checkbox" id="check" class="class1">
<p class="class2">If the checkbox is checked, the next link SIDEBARLINK should have border of red color for demo purpose.
Sidebar Link
</p>
Assuming #sidebar is in a different part of the HTML from .class1 etc., then no, you cannot do this. CSS selectors are a sequence of element specifiers where each specifier is either below (child or descendant) or at the same level (following sibling) as the previous one, and the final one is the one targeted. You cannot randomly reach out and affect a different part of the HTML. The curly bracket notation you invented in an attempt to target the sidebar is not CSS, and although it looks a bit like SASS, which confused some of the people answering, is not SASS and no, SASS cannot magically do what CSS cannot. SASS is mere syntax sugar.
Related
I found a way to override .sb-show-main by having a storybook.scss as below.
//.storybook/storybook.scss
.sb-show-main {
background-color: green;
padding: 16px;
margin: 20px;
}
Then simply import it into .storybook/preview.js
import "./storybook.scss";
The problem I'm facing and couldn't understand is that, background-color: green do have effect, but padding & margin seems to be ignored. Wondering if anyone ever modifying sb-show-main?
The default value for padding is 1rem, I would like to change it to 20px instead.
The styles you are trying to overwrite may be using the css !important directive, or may be more specific in their targeting of an element. I always try to be specific first, but otherwise I will use !important as a last resort.
.container header ul li p {
color: blue;
}
// OVERWRITE STYLES
p { /* this wont work, because it's not as specific as the original rule */
color: yellow;
}
.container header h1 ul li p { /* try this first */
color: purple;
}
p { /* otherwise use !important as last resort */
color: orange !important;
}
<div class="container">
<header>
<h1>Logo</h1>
<ul>
<li><p>One</p></li>
<li><p>Two</p></li>
<li><p>Three</p></li>
</ul>
</header>
</div
My css is structured in components, each component is stand-alone.
example:
.menu {
background: black;
}
The framework I'm using sometimes adds a class to the body-tag. For example for logged in users it would look like this:
<body class="loggedIn">
<div class="menu"</div>
</body
I would like to keep the css structured inside each component. Is it possible to add a selector in less that is added before the parent? Something like:
.menu{
%loggedIn{
color: red
}
}
should give loggedIn users a red menu.
Unless I am completely missunderstanding you, and there is a possibility, then the ampersand-parent-selector is exactly what you need!
.menu{
.loggedIn & {
color: red
}
}
Should result in
.loggedIn .menu {
color: red
}
You can reference the parent selector using &: http://lesscss.org/features/#parent-selectors-feature
LESS
.menu {
background: black;
.loggedIn & {
color: red
}
}
Will compile to CSS
.menu {
background: black;
}
.loggedIn .menu {
color: red
}
i have a main "div" with multiple divs and "a" tags and i wanted to set a "template like" css to make them all look the same, but some of the A tags need to be different so i thought about making it like this:
<div class="main">
CLick A
<br/>
CLick B
<br/>
CLick C
....
</div>
and on the css:
.main a{
/* Links Scheme */
}
.exception{
/* particular link css */
}
But the browser gives preference to my "template" instead of the particular class. shouldn't the class be the most important or am i missing something?
FIDDLE Link
PS: without the use of "!important" tag please
This is an issue of specificity. Since .main a includes a class and a tag name, it is more specific, and thus gets higher precedence than just a class name.
So, to solve it, use .main .exception for your exception.
.main a is more specific then .exception. I think what you are going for is:
.main a{
/* Links Scheme */
}
.main a.exception{
/* particular link css */
}
In css, orders are also determined by how specific the selector is, so try changing .exception to .main a.exception.
jsFiddle: http://jsfiddle.net/jdwire/DFNyW/2/
you can use :not() pseudo-class, The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class. so you can fix code like this:
.main a:not(.exception){
color: #3b5998;
outline-style: none;
text-decoration: none;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
.exception{
color: #0498ba;
font-family: Verdana, sans-serif;
font-size: 30px;
letter-spacing: 2px;
margin: 0 0 0;
padding: 0;
font-weight: bold;
text-decoration: none;
}
<div class="main">
CLickA
<br/>
CLickB
<br/>
CLickC
</div>
I'm using SASS for a project and so far I'm pretty satisfied with it.
However I have some code that should only be presented for IE 7 and below, using the class name .ie-lt8 for that. But when i extend that selector in SASS, with a nested selector i create multiple selectors.
Example (extending a display: inline-block code for IE):
SASS
/* My extension code */
.ie-lt8 %ie-inline-block {
display: inline;
zoom: 1;
}
/* I want the li to be inline-block */
#my-ul li {
display: inline-block;
#extend %ie-inline-block;
}
CSS produced
/* My extension code */
.ie-lt8 #my-ul, #my-ul .ie-lt8 li {
display: inline;
zoom: 1;
}
/* I want the li to be inline-block */
#my-ul li {
display: inline-block;
}
Generally this is just fine, but the #my-ul .ie-lt8 li worries me a little. In this example it's ok as the code works fine with both selector (the mentioned selector just doesn't exists). But what if i have another code where the selector DOES matter, then this would cause a problem.
A thought example:
SASS
/* I want the div to get a red border,
but the div inside .container to have a green border */
#myid .container div { border: 5px dotted green; }
#myid div {
#extend %red-border;
}
/* My extension code */
.container %red-border {
border: 1px solid red;
}
CSS it would produce
/* I want the div to get a red border,
but the div inside .container to have a green border */
#myid .container div { border: 5px dotted green; }
/* My extension code */
.container #myid div, #myid .container div {
border: 1px solid red; /* [OVERRIDE OF THE BORDER] */
}
My question is then; is there a way to make SASS only take the initial selector, without creating multiple selectors from a nested selector (a lot of selectors in one sentence)?
I tried gooling for this issue, but i find it hard to find any articles/blogs/etc. regarding this issue.
UPDATE
I'm aware of various workarounds, such as using #mixin's instead. I was just wondering whether there was something i missed regardig SASS, or if someone could tell me why this is? Cause it seems to me like it's kind of a bug.
My answer is in SCSS - not SASS so you'll have to convert...
For browser targeting like this, I would recommend using mixins, and furthermore - #content within a #mixin to achieve your desired results. It also sets up a much more understandable set of rules with context.
For your specific example, it's as simple as moving your inline-block fix into a mixin instead of declaring only as a class.
#mixin ie7-inline-block {
display: inline;
zoom: 1;
}
#my-ul li {
display: inline-block;
.ie-lt8 & {
#include ie7-inline-block;
}
}
Even better than that though, by using #content, you can always ensure that your style is prefixed with .ie-lt8 by making a mixin like so:
#mixin ie7 {
.ie-lt8 & {
#content;
}
}
#my-ul li {
display: inline-block;
#include ie7 {
display: inline;
zoom: 1;
}
}
Which will output the same css, but allows your IE7-Specific styles to be wrapped each time in some context that makes sense to anyone who reads your code.
i have a a:hover for all my links on my page:
a:hover {
background-color: blue;
text-decoration: underline;
color: black;
}
but but there are specific ones in a div that i don't want anything to happen when you hover over them, so can i do something like this?
#what_we_offer a:hover {
background-color: none:
text-decoration: none;
color: none;
}
basically i don't want it to do any of the above when it hovers over them specific links.
thanks
Yes that should work fine, although you likely don't want to set none unless you really don't want any style... setting your base colors etc. should work fine.
#what_we_offer a:hover {
background-color:#fff;/*presuming was originally white*/
text-decoration:none;
color:#000;/*presuming was originally black*/
}
PS I'm not sure if it was just a typo, but your original background-color:none: line was terminated with a colon vs. a semi-colon thus it would have caused issues.
#what_we_offer a:hover {
background-color: transparent;
text-decoration: none;
color: none;
}
use transparent instead of none, that works.
thanks for all the answers.
Rather than using id with css use Class
/* for link where you want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you dont want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
When you want to override CSS values you can do two things: adding new CSS declarations after the one you want to override or using "!important"..
So for your problem you can try:
a.reset:hover {
background-color: #FFFFFF;
text-decoration: none;
color: #000000;
}
.. and then add the links you want to override this new class:
Link with reset
But this CSS class must be declared after you normal "a" tag declarations or this won't work.
Another way is to use !important but I recommend not to abuse this one. But for overriding it's the fastest and safest way to be sure it will work:
a.reset:hover {
background-color: #FFFFFF !important;
text-decoration: none !important;
color: #000000 !important;
}
.. and this one you can add anywhere in your CSS file and any link with the "reset" class will get those styles: white background, no text decoration and black text.
Oh and for the background you cand try: background: none; and will clear all background styles.. background-color, background-image, etc
As a side note.. id's are used to reference a single element and it must be unique.. and classes are used to reference multiple elements. Multiple uses of the same id as you would use a css class.. you can brake javascript and it won't validate your HTML.
Yes but beware that a:hover{} should come before #what_we_offer a:hover {}.
I think if you do the reverse of what Pranav said, you can have less modifications i,e
/* for link where you ***DO*** NOT want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
so you need to add class for a href s in some particular DIVs
You can make use of CSS selectors. The best thing I think you can do is to use the selector not. Let me show you an example:
<html>
<head>
<style type="text/css">
a:not([not_custom]){
background: #00FF00;
color: #FF0000;
}
</style>
</head>
<body>
<div>
Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
</div>
</body>
</html>
As you can see, I'm defining the a style using the not selector. So, I'm saying that I want to put a green background and a red color to all the a that doesn't have the attribute not_custom. As a result of this, you can see that Test 1, Test 3 and Test 5 will have the style defined and Test 2, Test 4 and Test 6 will be normal, without the style.
NOTE: you can define the attribute you want. You don't have to named not_custom. It can be called whatever if you want.
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
This is correct.
If you want only particular page, add
body-id a:hover {
background-color: none:
text-decoration: none;
color: none;
}