What CSS code should i put in my style.css so that the menu font becomes black and bold when in selected state.
<li class="selected">Health Coaching</li>
HELP! thanks
You can use this:
.selected a:active
{
color: black;
font-weight: bold;
}
To apply same settings when hovering over, use this:
.selected a:hover
{
color: black;
font-weight: bold;
}
Try:
.selected a {
color: #000;
font-weight: bold;
}
Use This
li.selected a {
font-weight: bold;
color: #000;
}
Related
I'm trying to convert this css to use an attribute "starts-with" selector because I have several anchor elements with id attributes that start off with the same value...
a#cta_button_127944_79d30f48-4e68-43c8-949d-a9734a713b32,
a#cta_button_127944_40183a15-c491-4389-b5a8-4cdf099f6003,
a#cta_button_127944_4acbc01a-9116-4540-9bc4-196052464441,
a#cta_button_127944_dc0b71c9-f602-43ac-a318-d18811217e4b
{
background-color: #336699;
color: #fff;
font-size: 12px;
font-weight: bold;
}
Here is my wildcard..
a[id^="cta_button_127944"] {
background-color: #336699;
color: #fff;
font-size: 12px;
font-weight: bold;
}
Individual selectors work perfectly. The attribute "starts-with" selector is not getting picked up.
Thanks!
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>
Please check out my fiddle:
http://jsfiddle.net/zzh0ym2m/1/
Once I click on a menu button "Home", "Settings", and so on, the font should be changing to white, but it doesn't. I cannot figure out where the error is located, after trying to change stuff around. It should be turning white:
.topmenu-selectedblue {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#78b1ff, #4881dc)
}
.topmenu-selectedred {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#ff8476, #dc5348)
}
.topmenu-selectedpurple {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#b479ff, #854ade)
}
.topmenu-selectedgreen {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#9dd592, #649f5a)
}
.topmenu-selectedorange {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#fdc652, #dba439)
}
It seems that this
.topmenu-ul > li a {
color: #e6e6e6;
font-size: .7rem;
line-height: 20px;
height: 20px;
display: block;
padding: 0 20px
}
is overriding any other settings.
So you need to address that..perhaps with
.topmenu-ul > [class*=topmenu-selected] > a{
color: #fff;
}
That said, there is some repetition and very specific selectors in your CSS that could be tidied up that might make it simpler.
JSFiddle Demo
Is there a way of styling links using a id or a class without having to create a new selector for each individual element? for example
something like this or close to this would be preferable
#logo {
a: link {color: black}
a: visited{color: black}
a: hover{color: black}
}
However, the above syntax does not work instead all i can find is
#logo a:hover {
color: black;
}
#logo a:visited {
color: white
}
I feel like there's an easier way than this.
Heres how to do it to all links
I believe it should work:
#logo a:link,
#logo a:visited,
#logo a:hover {
color: black;
}
Not all browser support the above methodology of separating the tag styles with class or ID when you are dealing with different style in CSS with tag in single page.
One can follow below method:
**If using ID with Field**
a:link#myID {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited#myID {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover#myID {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active#myID {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
Click Here
**If using Class with Field**
a:link.myClass {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited.myClass {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover.myClass {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active.lx {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
Click Here
Not directly in css, but there are some projects that extend css
Check out sass:
http://sass-lang.com
I also believe current CSS syntax is not all that optimal. My personal choice is to go with something like LESS where you get much more intuitive and compact syntax to style your work.
With pure CSS you must specify each pseudo-selector but you can group them to apply the same style attributes;
#logo a:link,
#logo a:visited,
#logo a:hover {
color: black;
}
Beware that The order of link pseudo-classes matters.
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; }