I've got a class
.text2{
font-size: 1.2em;
color: #473f37;
padding-bottom: 0.3em;
}
I want text of links to appear white within this class, how do I do it?
<div class="text2">
Notices
</div>
I tried the below and it not working
.text2 a:link{
color: white;
}
.text2 a { color: #ffffff; }
Related
This question already has answers here:
SCSS: parent hover selector
(2 answers)
Closed 2 years ago.
I can't figure out why my .notes-list__item__contents isn't getting a white color on .note-list__item:hover... What am I doing wrong with my selector? I couldn't find similar case in the docs.
.notes-list {
list-style-type: none;
margin: 0;
padding: 0;
&__item {
padding: 30px;
background-color: $secondary-color;
border-radius: 15px;
margin-bottom: 15px;
&:hover {
background-color: $accent-color;
color: #fff;
&__contents { color: #fff; }
}
&__title {
font-size: 1.125rem;
font-weight: 600;
}
&__contents {
margin-top: 20px;
color: $text-color;
font-weight: 500;
}
}
}
<li className="notes-list__item">
<div className="notes-list__item__title">Title</div>
<div className="notes-list__item__contents">
Some contents
</div>
</li>
Having this doesn't feel quite scss
&:hover {
.notes-list__item__contents { color: #fff; }
}
So i checked your output css and its resulting in below css
.notes-list__item:hover__contents {
color: #fff;
}
As you can see its suffixing contents after the hover pseudo element.
you have to write like this in case of nested hover
&:hover &{
background-color: green;
color: #fff;
&__contents { color: #fff; }
}
This will generate below CSS
.notes-list__item:hover .notes-list__item__contents {
color: #fff;
}
I have a link which has a small drop down arrow after it, added using :after.
What I want to do is change the color of the arrow when I hover over the link, is this possible?
This is what I'm trying but doesn't work:
.detail__changer {
color: #333;
cursor: pointer;
text-decoration: underline;
font-size: 33px;
}
.detail__changer:after {
color: #333;
content: ' ▾';
}
~ .detail__changer:hover:after {
color: red !important;
}
Here's a fiddle
Also, I have seen this question, my question is not the same
Remove the tilde
.detail__changer {
color: #333;
cursor: pointer;
text-decoration: underline;
font-size: 33px;
}
.detail__changer:after {
color: #333;
content: ' ▾';
}
.detail__changer:hover:after {
color: red !important;
}
<div class="detail__changer">Hover over me</div>
Let's say we have this:
.first-class {
background: purple;
font-weight: bold;
color: white;
}
.first-class > .second-class {
/* code goes here */
}
In .second-class, Is it possible to only inherit one property from first-class, say, background, while leaving the other properties as default?
No. You have to reset them. .first-class being the parent of .second-class will take its inheritance.
Here is the WORKING EXAMPLE to illustrate your scenario before reset.
Now when you reset it.
Find the below code before and after reset.
Before reset:
The HTML:
<div class="first-class">
<div class="second-class">abcd</div>
</div>
The CSS:
.first-class {
background: purple;
font-weight: bold;
color: white;
}
.first-class > .second-class {
/* code goes here */
}
After Reset:
The HTML:
<div class="first-class">
<div class="second-class">abcd</div>
</div>
The CSS:
.first-class {
background: purple;
font-weight: bold;
color: white;
}
.first-class > .second-class {
background: inherit;
font-weight:normal;
color:black;
}
I have a slideshow, and I was able to get the description to show up in yellow, which I want.
But the title (H2) above the description is invisible, unless you hover over it. I currently have this as my CSS:
.slideshow_container { background: #000; }
.slideshow_container a { text-decoration: none; }
.slideshow_container .slideshow_slide { margin-right: 2px; }
.slideshow_container .slideshow_slide_text h2 { color: #FFFFFF; text-align: left;
font-size: 1.3em; }
.slideshow_container .slideshow_slide_text p { color: #FFFF00; font-weight: bold;
text-align: left; }
.slideshow_container .slideshow_slide_image { }
.slideshow_container .slideshow_slide_video { }
.slideshow_container .slideshow_description { background: #000; width: 100%; }
.slideshow_container .slideshow_description h2 { color: #FFFFFF; font-size: 1.3em;
text-align: left; }
.slideshow_container .slideshow_description p { color: #FFFF00; font-size: 1.1 em;
font-weight: bold; text-align: left; }
.slideshow_container .slideshow_description a { color: #FFFF00; font-weight: bold; }
.slideshow_container .slideshow_transparent { filter: alpha(opacity = 50); opacity: 0.5; }
.slideshow_container .slideshow_transparent:hover { filter: alpha(opacity = 80); opacity:
0.8; }
The HTML:
<div class="slideshow_container slideshow_container_slideshow-jquery-image-gallery-custom-
styles_1" style="height: 600px; max-width: 660px;" data-session-id="0"><div
class="slideshow_controlPanel slideshow_transparent"><ul><li
class="slideshow_togglePlay"></li></ul></div><div
class="slideshow_button slideshow_previous slideshow_transparent"></div><div
class="slideshow_button slideshow_next slideshow_transparent"></div><div
class="slideshow_pagination"><div
class="slideshow_pagination_center"></div></div><div
class="slideshow_content" style="display: none;"><div
class="slideshow_view"><div
class="slideshow_slide slideshow_slide_image"> <a
target="_self" > <img src="http://www.occupyhln.org/wp-content/uploads/2013/07/Audrey-
Edmunds.jpg" alt="Audrey Edmunds" width="1000" height="588" /> </a><div
class="slideshow_description slideshow_transparent">
<h2><a target="_self" >Audrey Edmunds</a></h2>
<p><a target="_self" >Here, Audrey Edmunds poses at the John C. Burke Correctional Center
in Waupun, Wis., 10 years into serving her 18-year conviction and sentence for shaking a
baby to death, while babysitting. She was freed in Feb., 2008 after an appeals court said
new research into the syndrome cast doubt on her guilt. According to Northwestern
University's Center on Wrongful Convictions, experts asserted that symptoms they once
thought were proof of Shaken Baby Syndrome can be from other causes, including accidents,
illness, infection, old injuries, and congenital defects.</a></p>
</div></div><div style="clear: both;"></div></div>
The paragraph part seems to be working well, and the descriptions are showing up yellow. But I'd like to get the heading to show up white, so it stands out. Currently, you have to hover over the titles just above the paragraph in order to see them.
You can see the sideshow on this particular page ... I've tried to firebug it, but nothing seems to work.
Any guidance in this regard would be greatly appreciated!
It's all about specificity Id override any class.
you have a rule #content h2 a, #content h2 a:visited which as i said override your .slideshow_container .slideshow_description h2 selector
Read more about specificity Here.
Looks like this style #content h2 a is taking precedence and overriding your white with #111111
Since you use an id with that stlye, it is overriding this style .slideshow_container_style-dark .slideshow_description a
You should also not that the text you have in the h2 has link tag (a). That's why your snippet above is not recognized: .slideshow_container .slideshow_description h2
To fix this, you can try this: #content .slideshow_container .slideshow_description h2 a. It's kind of ugly, but should work.
I have below code,
<div id="nav">
<a href="#" >Tab1</a>
<a href="#" >Tab2</a>
<a href="#" >Tab3</a>
<a href="#" >Tab4</a>
<a href="#" >Tab5</a>
<a href="#" >Tab6</a>
<a href="#" >Tab7</a>
Tab8
<a href="#" >Tab9</a>
</div>
#nav a {
float: left;
color: #004761;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 9px 5px 9px 13px;
background-colour: white;
}
.tab8Class {
float: left;
color: #004761;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 9px 5px 9px 13px;
background-color: lightgray;
}
I want to apply a different background-colour for Tab8. So, for Tab8 alone I have added an extra class in the a href tag.
However, even for Tab8, #nav a is overriding all the attributes for tab8Class.
How can I make tab8Class to get applied?
You need to make the second rules more specific (for more info take a look ,e.g., at MDN on Specificity), so it does not get overridden by the first one. Additionally you don't have to repeat all unchanged properties:
#nav a {
float: left;
color: #004761;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 9px 5px 9px 13px;
background-color: white;
}
#nav .tab8Class {
background-color: lightgray;
}
Example Fiddle
There was a typo in the first rule as well: It said background-colour instead of background-color.
Make your selector even more specific:
#nav .tab8Class
You also remove the u in colour to have correct css:
background-color: white;
^
Use
#nav .tab8Class {
instead of:
.tab8Class {
This will make your selector more specific.
You can read about CSS specificity here.
Change your code like below
#nav a.tab8Class {
float: left;
color: #004761;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 9px 5px 9px 13px;
background-color: lightgray;
}
Just change the bg color rule, no need to write all rules again.
#nav a.tab8Class{
background: #000 ; // change the color
}
specificity you need to read something about this.
You have 2 options:
1) remove the class and use:
#nav a:nth-child(8){
background-color: lightgray;
}
2) this is more backward compatible:
#nav .tab8Class{
background-color: lightgray;
}
If you want to add a special hover effect (as assted in comments)
#nav .tab8Class:hover{
//Do something
}
You can simply do it with jquery. Please add jquery library.
$(document).ready(function(){
$('#nav a:eq(7)').addClass('tab8Class');
});