I'm trying to change the text color of "Sale" item, but not a phone number with only CSS. I can't edit HTML code.
.menu.left a:first-child {
background: yellow;
color: red;
}
Results in both yellow & red
.menu.left li:nth-child(2)`
background: yellow;
color: red;
}
Results in only yellow background
Do you have an idea how to solve this?
You can target the <li> or the <a>
in this case i target the second li and then the a so the font changes to red.
If you only target the li, the font wont change to red.
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
Example targeting the <a>
.menu.left li:nth-child(2) a{
background-color: yellow;
color: red;
}
<ul class="menu left">
<li>
1231233123
</li>
<li>
Sale
</li>
</ul>
Example only targeting the <li>
.menu.left li:nth-child(2){
background-color: yellow;
color: red;
}
<ul class="menu left">
<li>
1231233123
</li>
<li>
Sale
</li>
</ul>
Comment by OP
"Thank you, Gerardo, your solution worked very well. I run into trouble though with mobile version of this link. Maybe you could take a look? codepen.io/anon/pen/xYJKRW "
On your comment you added a codepen, where you have the same mistake. You are trying to target the <li> when you have to target the <a> try this:
[data-mobile-dropdown-rel="sale"] a {
color: red;
}
.menu.left li:nth-child(2) a {
background: yellow;
color: red;
}
Add color:red; to .menu.left li:nth-child(2) and keep the background:yellow; where it is now. Your trying to change the font color of the <a> tag not the <li>.
This is supposed to work:
ul.menu li:nth-child(2) a {
background-color: yellow;
color: red;
}
For changing color of <a> you have to change color of <a> directly. Otherwise it won't work. In this case you have to change color of <a> not <li>. That is why it does not work.
Related
This question already has answers here:
Remove underline only from anchor element child
(7 answers)
Closed 5 years ago.
I have a problem with css :not function.
When I hovering to link there is underline both of them Item1 & Description. I don't want to see underline below Description when hover.
Here is my menu code:
<ul>
<li>
<a href="#">
Item 1
<span>Description</span>
</a>
</li>
</ul>
CSS:
span { display:block; }
ul li a:hover:not(span) { color:blue; text-decoration: underline; }
When I change span display to inline-block it is working nice but need to be only block. How can I solve it ?
Also, Inline-block shows the description NEAR of the Item. I want to put it under of the Item Name. How can I make it ?
you are saying to the style a:not(span), A that is not a SPAN, of course a isn't a span ;)
Use a css class for this purpose for instance like :
span { display:block; }
ul li a:not(.has-span):hover { color:red; text-decoration: underline; }
<ul>
<li>
<a href="#">
Item 1
<span>Description</span>
</a>
</li>
<li>
<a href="#" class="has-span">
Item 2
<span>Description</span>
</a>
</li>
</ul>
You shouldn't put your state (:hover) before the selector. So you need to change it to:
ul li a:not(span):hover { color:blue; text-decoration: underline; }
And moreover this will not work, because, a single element cannot be a <a> as well as a <span>. Instead you need to just use:
span { display:block; }
ul li a:hover { color:blue; text-decoration: underline; }
ul li a:hover span { color:black; text-decoration: none; }
I have an a tag and a li inside it. The a tag colors the list items innterText. How can I nullify its effects on the color of its content and also remove the underline?
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>asd</li>
</ul>
</body>
</html>
It is invalid to have <a> inside <ul> tag in the way you did, and it's also won't pass the W3C validation. However, If I understand your question, you may try this:
<ul>
<li>
<a href="#">
<ul>
<li>asd</li>
</ul>
</a>
</li>
</ul>
In order to remove the underline, you can do:
ul li a {
text-decoration: none;
color: #b61c1c; /* For Example */
}
Fiddle
Try this:
a {
background-color: transparent;
}
a:hover {
text-decoration: none;
}
You can style it like this:
<a style="text-decoration: none; color: #TheColorYouWant"></a>
Use CSS. this removes underlines from a and li elements:
a, li {
text-decoration: none !important;
}
Just add your style according to your requirements inside this class "a:-webkit-any-link". for example if you want to remove underline then just add "a:-webkit-any-link{text-decoration: none;}".
Note: Here we are using '-webkit-' for Chrome browser.
I am using joomla 3 and bootstrap.min.js
I am creating menu and giving special class in order to change hover, active, visited links and style of the menu.
I could not find how to change active link color of menu.
Suppose I have 2 menu. Home and Contact.
When I am in Home it is red, I want to change this color.
I could change a:active and a:hover.
Here is code;
.topmenu .active a,
.topmenu .active a:hover {
background-color: white;
}
.topmenu > li > a{
color: orange;
font-weight:bold;
}
.topmenu > li > a:hover {
color: black;
background:white;
}
Even I used div to change color of active link.
Here is code
#top-menu a{
background-color: white;
color: orange;
font-weight:bold;
}
#top-menu a:focus
{
color: orange;
}
#top-menu a:hover{
color: black;
}
Every time when I click to Home it is activated and the color is red. What I want to change it to orange. Can not find how to do it.
Here is my markup code
<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li class="item-109 current active">Home</li>
<li class="item-138"> Russian </li>
<li class="item-110"></li></ul>
</div>
What do you suggest me to do?
Finally with experiments I found how to capture it.
#top-menu .current a
{
color: orange !important;
}
Thank you everyone for your time and help.
Much appreciated!
In order to do what your are trying to do you must first understand a:hover Must come after a:link and a:visited in the CSS definition in order to be effective. If they are not in this order then they will not work.
Second is you must understand that if you where thinking (a:active) meant the color of the current link the end user was on, this is incorrect. (a:active) changes the color when you click on the link. You can test this by holding down the mouse button on the link that you made a different color with the (a:active).
Finally, if you are trying to do this using just CSS you have to add a specific class on the current link that the end user is on. Below I left you an example hope this helps :)
Your Navigation Bar As Follows
-Home
-Russia
-Italy
We are on the Italy Page For This Example:
/*YOUR CSS SHOULD LOOK LIKE THIS*/
/* unvisited link grey */
#top-menu a:link {
color: #777;
}
/* visited link grey */
#top-menu a:visited {
color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
color: #0CF;
}
/* selected link blue */
#top-menu a:active {
color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
color: #0CF !important
}
<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li>Home</li>
<li>Russian</li>
<li class="activePage">Italy</li><!--Page End User Is On-->
<!--Look UP ^^^^^^^^ Hope this helps :)-->
</ul>
</div>
Notice I did not put the .activePage tag in the other links? What this does is allow your original colors that you choose in your css for your navigation bar to still take place while the page that is active stays solid with a different color.
The reason this worked is because I added !important at the end of the color for that separate class.
.activePage {
color: #0CF !important
}
So to apply this same technique to your other pages it would simply look like this:
Home Page
/*YOUR CSS SHOULD LOOK LIKE THIS*/
/* unvisited link grey */
#top-menu a:link {
color: #777;
}
/* visited link grey */
#top-menu a:visited {
color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
color: #0CF;
}
/* selected link blue */
#top-menu a:active {
color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
color: #0CF !important
}
<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li class="activePage">Home</li>
<li>Russian</li>
<li>Italy</li>
</ul>
</div>
I hope I gave you a solid answer to your question because I hate it when I look all over the web and can't truly find the answer I am looking for.
I suggest you creating an ID (#) selector locally for the Div that contains the a links, then take that id name in your style-sheet and override the existing rule.
For instance,
#abc a{xxx:xxx;}
#abc a:active{xxx:xxx;}
Hope this helps.
For change the current active link color we can use code in external css file or inline css
.active a
{
background-color:#ff0000;
}
// Fix navigation menu active links
$(document).ready(function(){
var path = window.location.pathname,
link = window.location.href
;
$('a[href="'+path+'"], a[href="'+link+'"]').parent('li').addClass('active');
});
$(function (){
$('nav ul li a.sub-menu').each(function(){
var path = window.location.href;
var current = path.substring(path.lastIndexOf('/')+1);
var url = $(this).attr('href');
if(url == current){
$(this).addClass('active');
};
});
});
Try changing your CSS to .item-109 { color: white !important; }.
Here's a link with more information on !important.
If you want to globally change the link colors (or pretty much anything else), create a customized download: http://twitter.github.io/bootstrap/customize.html
In response to your comment, if you want to override the supplied CSS, you need to create a rule that is more specific. So, either create a selector like #my-custom-container .item-109 .current .active or add a !important to your rule(s) for .item-109 .current .active
first add php code in link
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link <?php if(PAGE == 'index') { echo 'active'; } ?>" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link <?php if(PAGE == 'about-us') { echo 'active'; } ?>" href="about-us.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link <?php if(PAGE == 'contact-us') { echo 'active'; } ?>" href="contact-us.php">Contact Us</a>
</li>
</ul>
then in every page
i have nested lists with links inside the li tags. On nesting level x I want to change the appearance of the links. Just some sample code:
CSS:
.blue a { color: blue; }
.red a { color: red; }
HTML:
<ul>
<li class="blue">blue-1</li>
<li class="red">red-1</li>
<li class="blue">blue-2
<ul>
<li>
blue-3
<ul>
<li class="red">
red-2
<ul>
<li>red-3</li>
<li>red-4</li>
</ul>
</li>
<li>blue-4</li>
</ul>
</li>
<li class="">blue-5</li>
</ul>
</li>
<li class="red">red-5
<ul>
<li>red-6</li>
<li>red-7</li>
</ul>
</li>
</ul>
In that way it is working as expected. Links with text red-* are in red. But when I change the order of the CSS classes, it is not longer working:
.red a { color: red; }
.blue a { color: blue; }
Why this behavior? Shouldn't it be the same?
I have to use more colors than red and blue, so it is impossible to give a correct order in CSS.
Css selector precedence is set according to how specific it is:
every tag is counted as 1 point
every class as 10 points
event id as 100 points
Both selectors you got have the same precedence, so that one which is set further in code overrides previous ones.
The reason for this is that in your css you're telling every a tags that are child, grandchild, etc. elements of a class named blue. And that's getting overidden when you're telling that every a tags that are child, grandchild, etc. elements of a class named red should be red.
So instead of doing this (affecting all link tags)
.blue a { color: blue; }
.red a { color: red; }
You could do this (affects only the first child if it's a link tag):
.red > a,
.red > ul > li > a{ color: red; }
.blue > a,
.blue > ul > li > a { color: blue; }
What that second line does is it finds all elements that has a class name red. Then it finds all direct child ul elements. And under those matching elements it finds all direct child li elements that has direct child a elements. Matching these, it finally adds styles.
JSFiddle:
http://jsfiddle.net/Y9jFr/
To my knowledge, the answer to this is no, can't be done, but I need a second opinion:
If I have the following:
<li>
<a >#</a>
<div class="sub">
#
</div>
</li>
and have a background image that appears on li a:hover is it possible to have that background stay on when hovering on the .sub div? This also has to work pure CSS - no javascript cheats.
My understanding is because .sub isn't a child of the a we can't reference it in css to keep the hover.
Because the image is for only one section of the code, I can't move it to the li and reference li:hover a.
Not sure what all you are trying to achieve, but there are many hover effects that can be done.
SECOND UPDATE: If you don't need to interact (other a tags, etc) at all with anything in the div, then this way cheats to get the effect. Note how the anchor inside the div does not register because of the z-index.
UPDATE I think I understand your issue better now. Can you add a wrapper and do the following?:
Example HTML:
<ul>
<li>
<div>
<a>Some anchor text</a>
<div class="sub">Some div content <a>and anchor</a></div>
</div>
</li>
</ul>
Example CSS:
li:hover {
background-color: cyan;
}
li > div:hover > a {
background-color: green;
}
a:hover {
color: yellow;
display: block;
}
a:hover + .sub {
outline: 1px solid blue;
}
.sub:hover {
color: red;
outline: 1px solid red;
}
If you can't use a class on the li or modify the div.sub to be in the a, you're probably out of luck without Javascript:
Is there a CSS parent selector?
However, if you can, you could use:
<ul>
<li class="sub">
<a>Class #</a>
<div class="sub">#</div>
</li>
<li>
<a>Inner #
<div class="sub">#</div>
</a>
</li>
<li>
<a>None #</a>
<div class="sub">#</div>
</li>
</ul>
li.sub:hover,
li a:hover {
background: url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=32&d=identicon&r=PG);
}
li a {
border: 1px solid blue;
display: block;
}
.sub {
border: 1px solid green;
}
http://jsfiddle.net/B7Au2/4/
I don't know if you can modify the html, but if you can, try swapping the div and the a:
<li>
<div class="sub">
#
</div>
<a >#</a>
</li>
Now you can use the adjacent sibling selector:
li a:hover, li .sub:hover + a {background:url('some-image.png')}
Unfortunately there's no way to select the previous element through CSS: that's why you need to swap your elements.