I am reading through this guide.
Go to section that says "Selector Sequences", it is near 3/4 of the web page, there is this codes:
#fake-links .link {
#extend a;
}
a {
color: blue;
&:hover {
text-decoration: underline;
}
}
In the guide it says that SCSS codes will transpile into this CSS codes:
a, #fake-links .link {
color: blue; }
a:hover, #fake-links .link:hover {
text-decoration: underline; }
My question: Why the #fake-links in third line does not become #fake-links:hover?
This is because it is extending .link when it's a child of #fake-links, not extending #fake-links itself.
In this scenario you would have something like:
<div id='#fake-links'>
<a href='#' class='link'>...</a>
</div>
Where as your a tag with the link class is what's styled.
If you want the a styles to apply to #fake-links you would omit .link from the selector in your SCSS:
#fake-links {
#extend a;
}
As an example:
https://www.sassmeister.com/gist/2df1a3ca4d889201fe3a86e324643c04
Related
I am trying to create a basic CSS template for a project. It needs to support both a light and dark mode.
In the html, the body tag has data-layout-color attribute. I have some toggles that allow switching between light and dark, and it is updating this attribute. In my CSS sheet, I use the attribute selector for background color, and it works! Now I need to be able to set other elements color based on the light/dark mode, but that's not working as the individual element doesn't have the attribute. I don't want to add data-layout-color to everything, and then have to update it all with my js. Any suggestions?
HTML:
<body ng-controller="myApp" data-layout-color="dark" data-layout="topnav">
<button type="button" class="btn btn-primary">PRESS ME!</button>
</body>
CSS:
body[data-layout-color="dark"]{
background-color: var(--my-body-dark-bg);
}
body[data-layout-color="light"]{
background-color: var(--my-body-light-bg);
}
.btn-primary[data-layout-color="light" {
color: var(--my-white-light);
background-color: var(--my-primary-light);
border-color: var(--my-primary-light);
}
.btn-primary[data-layout-color="dark" {
color: var(--my-white-dark);
background-color: var(--my-primary-dark);
border-color: var(--my-primary-dark);
}
You could write your selectors such that the attribute selector remains on body:
/* primary button under a "light" layout parent */
[data-layout-color="light"] .btn-primary {
color: var(--my-white-light);
background-color: var(--my-primary-light);
border-color: var(--my-primary-light);
}
But I think a better idea would be to change the custom property values so you don't need the theme-specific selectors on child elements in the first place:
[data-layout-color="dark"] {
--button-color-bg: white;
--button-color-fg: black;
}
[data-layout-color="light"] {
--button-color-bg: black;
--button-color-fg: white;
}
.btn-primary {
background-color: var(--button-color-bg);
color: var(--button-color-fg);
display: inline-block;
padding: 0.25em 1em;
border: 1px solid grey;
margin: 0.5em;
}
<div data-layout-color="dark">
<div class="btn-primary">Dark Body</div>
</div>
<div data-layout-color="light">
<div class="btn-primary">Light Body</div>
</div>
With plain css you can write it like this
body[data-layout-color="dark"]{
background-color: var(--my-body-dark-bg);
}
body[data-layout-color="dark"] .btn-primary{
color: var(--my-white-dark);
background-color: var(--my-primary-dark);
border-color: var(--my-primary-dark);
}
body[data-layout-color="dark"] .btn-primary a{
text-decoration: underline overline #FF3028;
}
I suggest you use scss though. It will make your life easier. If you'r using visualstudio code just download Live sass complier and click watch sass in the bottom right corner.
Using scss you would write it like this:
body[data-layout-color="dark"]{
background-color: var(--my-body-dark-bg);
.btn-primary{
color: var(--my-white-dark);
background-color: var(--my-primary-dark);
border-color: var(--my-primary-dark);
a{
text-decoration: underline overline #FF3028;
}
}
.btn-secondary{
color: var(--my-white-dark-secondary);
background-color: var(--my-primary-dark-secondary);
border-color: var(--my-primary-dark-secondary);
}
p{
color: var(--my-white-dark);
}
}
body[data-layout-color="light"]{
background-color: var(--my-body-light-bg);
/*etc etc*/
}
As an HTML element's pseudo classes ("pseudo states") cannot be triggered via JavaScript, I want to emulate pseudo-class CSS styling by creating identical CSS rules with regular classes, then use JavaScript to toggle these emulated pseudo classes:
document.getElementById('action-button').addEventListener('click', () => {
const underTest = document.getElementById('under-test');
underTest.classList.contains('hover') ?
underTest.classList.remove('hover') :
underTest.classList.add('hover');
});
button:hover {
background-color: pink;
}
button.hover {
background-color: pink;
}
<button id="action-button">
Regular button<br />
Hover for seeing :hover pseudo class styling<br />
Click for toggling emulated .hover class on "under test" button
</button>
<br />
<br />
<button id="under-test" class="hover">under test: Pseudo-class hover button</button>
This approach works for my purposes. Now I'm looking for a solution which generates such emulated CSS rules automatically from my SASS / .scss stylesheets:
For example, given this input input.scss:
span {
a:focus {
color: red;
}
}
I'd like this output output.css:
span a:focus {
color: red;
}
span a.focus {
color: red;
}
or
span a:focus,
span a.focus {
color: red;
}
Is there a SASS configuration or some Webpack plugin which automatically derives additional "emulated CSS rules" from all pseudo-class rules?
.button a:link {
color: blue;
}
.button a:visited {
color: purple;
}
.button a:hover {
color: red;
}
<div class="btn-group">
<button>Cambridgeshire</button>
<button>Cornwall</button>
<button>Cumbria</button>
<button>Derbyshire</button>
<button>Devon</button>
</div>
The links do not change color when selected. I have also tried:
btn-group a:link {color:blue} etc. but again that wording doesn't work.
What wording should I use?
If by "selected" you mean that they have focus, you can add a selector for :focus.
Also note that your buttons are children of the links, not vice versa, as your CSS rules imply, so you have to turn that around; plus button is a tag, not a class, therefore it shouldn't have a preceding dot in a CSS selector.
a:link button {
color: blue;
}
a:visited button {
color: purple;
}
a:hover button {
color: red;
}
a:focus button {
color: green;
}
<div class="btn-group">
<button>Cambridgeshire</button>
<button>Cornwall</button>
<button>Cumbria</button>
<button>Derbyshire</button>
<button>Devon</button>
</div>
.button is targeting an element with a class of "button", to target an element itself you would just use button. It probably makes more sense to target .btn-group instead of applying styles to all button's. It's also good to be specific, by adding that this only applies to button elements within .btn-group that are direct children of a tags.
You can set all the buttons within an a tag (:link) to be blue, and then set all buttons within an a tag that have been visited to be purple, and then set all buttons to be red on hover.
.btn-group a:link > button {
color: blue;
}
.btn-group a:visited > button {
color: purple;
}
.btn-group a > button:hover {
color: red;
}
<div class="btn-group">
<button>Cambridgeshire</button>
<button>Cornwall</button>
<button>Cumbria</button>
<button>Derbyshire</button>
<button>Devon</button>
</div>
Your CSS is wrong. You are trying to style an element with the class button and you are targeting an a element inside of that element. You don't need the button elements at all.
You should target .btn-group a. That basically means an a element inside of your .btn-group div.
.btn-group a:link {
color: blue;
}
.btn-group a:visited {
color: purple;
}
.btn-group a:hover {
color: red;
}
<div class="btn-group">
Cambridgeshire
Cornwall
Cumbria
Derbyshire
Devon
</div>
Notes:
:link - Styles the link in its normal state.
:visited - Styles the link once it has been visited by a user
:hover - Styles the link as the user hovers.
:active - this is a temporary state as the user is actively engaging, e.g. holding down the mouse button on click.
.btn-group a:link > button {
color: blue;
}
.btn-group a:visited > button {
color: purple;
}
.btn-group a:hover > button{
color: red;
}
<div class="btn-group">
<button>Cambridgeshire</button>
<button>Cornwall</button>
<button>Cumbria</button>
<button>Derbyshire</button>
<button>Devon</button>
</div>
I know I don't need the buttons, but that's how I want the links to appear and not merely with the name.
It doesn't appear to make any difference whether I use
<div class="btn-group">
<button>Cambridgeshire</button>
<button>Cornwall</button>
<button>Cumbria</button>
or
<div class="btn-group">
<button>Cambridgeshire</button>
<button>Cornwall</button>
<button>Cumbria</button>
I have changed the CSS to:
.btnn-group a:link { color: blue;
}
.btn-group a:visited { color: purple;
}
.btn-goup a:hover { color: red;
}
.btn-group a:active { color: red;
}
I want to give a different color to the element if either of the two conditions exists.
Here is the code:
.btn-link{
color: $color-black;
margin: 0;
&:hover{
color: $color-light-blue;
}
&:not(.collapsed){
color: $color-light-blue;
}
}
Everything is good, but it will be better if you can combine the two selectors
I already tried:
&:hover&:not(.collapsed){
color: $color-light-blue;
}
But only the hover is identified
Same way as you do in CSS:
&:hover, &:not(.collapsed) {
color: $color-light-blue;
}
This sets the color only if the element is in a hover state or doesn't have the class collapsed.
You can put a comma between the two combining selectors, like this: &:hover, &:not(.collapsed) {
Full example:
HTML:
<span class="btn-link">one class</span>
<span class="btn-link collapsed">two class</span>
CSS:
$color-black: black;
$color-light-blue: lightblue;
.btn-link {
color: $color-black;
margin: 0;
&:hover, &:not(.collapsed) {
color: $color-light-blue;
}
}
JSfiddle.
Sorry, no StackSnippet. We still can't handle SCSS here!
You can try this simple change your code
/*SCSS*/
$color-light-blue : red;
.btn-link {
&:hover:not(.collapsed) {
color: $color-light-blue;
}
}
/*compiled CSS*/
.btn-link:hover:not(.collapsed) {
color: red;
}
<span class="btn-link">one class</span>
<span class="btn-link collapsed">two class</span>
I would like to make it so that all of my tags look plain when they show up on the screen also after I visit them or if I hover over them. I put all of my divs in a wrapper and tried to refer to them but it didn't seem to work. I don't really need the wrapper if I could just refer to everything using a:hover ... that would be fine.
here is my HTML
<div id="wrapper">
<div id="settings_button">
<span class="settings_text">
Settings
</span>
</div>
<div id="posts_button">
<span class="one_bar_text">
Posts
</span>
</div>
<a href="#" alt="posts">
<div id="posts_button_dark">
<span class="one_bar_text">
Posts
</span>
</div>
</a>
<div id="profile_button">
<span class="one_bar_text">
Profile
</span>
</div>
<div id="profile_button_dark">
<span class="one_bar_text">
Profile
</span>
</div>
</div>
Below is my CSS
#wrapper a:link {
color: none;
text-transform: none;
}
#wrapper a:visited {
color: none;
}
#wrapper a:hover {
color: none;
text-transform: none;
}
I will be making most of my divs into links i just haven't yet. and i would like to avoid having to reference each div's tag on my CSS page
so i changed my CSS to this
a:link {
color: none;
text-transform: none;
}
a:visited {
color: none;
}
a:hover {
color: none;
text-transform: none;
}
but the link is still being underlined on hover over
a {
color: black;
text-decoration: none;
}
This is highly questionable, but it addresses the question you asked. You don’t need any fancy selectors, since any setting in a page style sheet that applies to an element will override browser defaults.
You just need to set an explicitly color (or use inherit, but IE does not support it), and to kill underlining, you need to set text-decoration, not text-transform.
You should use either links or buttons, not <divs>.
If you do decide to go with the current markup:
div[id*=button] {
...
}
If you decide to sober up (seriously, don't use divs!)
Just a or button will do.
a {
color: red;
}
Will color all links in red.
Note that it will catch all links, as in in the content area, the nav, the footer. Everywhere.
a{
color:#fff;
}
Is this what you meant?
Just use a
a:link {
color: none;
text-transform: none;
}
a:visited {
color: none; }
a:hover {
color: none;
text-transform: none; }