routerLink selected option color - html

I need to have red color on selected link About
<nav>
<a routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">About</a>
<a routerLink="product" routerLinkActive="active">Employees</a>
</nav>
How can I do that?


The routerLinkActiveattribute receive a css class. In your case, active is the css class.
So you will just need to declare the class in this way in your css file:
.active{
color:red;
}

Related

Anchor tag disabled color attribute not working?

I did disabled anchor tag using component and need to show grey color as disabled link, but here the link is disabled, not turned into grey color. So user cant find whether it is disabled or not. could you please help me out?
HTML:
<li class="nav-item" [class.disabled]="profile_flag">
<a class="nav-link {{routeProfileStatus}}" style="cursor: pointer;" tabindex="
{{profile_flag?-1:0}}" (click)="gotoProfile()">My Profile</a>
</li>
<li class="nav-item" [class.disabled]="waitingRoom_flag">
<a class="nav-link {{routeStatus}}" style="cursor: pointer;" tabindex="
{{waitingRoom_flag?-1:0}}" (click)="gotoDashboard()">Waiting Room</a>
</li>
component:
profile_flag : boolean = false;
waitingRoom_flag : boolean = false;
css:
.disabled{
color:grey;
text-decoration:none;
cursor:default;
pointer-events:none;
}

Your .disabled class is added to the li tag, but you need to apply that rule to the a inside li,
So use .disabled > a instead as a selector for that CSS rule.

Remove [class.disabled] from li and use ngClass on top of a
<a class="nav-link {{routeStatus}}" [ngClass]="{ 'disabled' : waitingRoom_flag}" style="cursor: pointer;" tabindex="{{waitingRoom_flag?-1:0}}" (click)="gotoDashboard()">Waiting Room</a>

You need to use the disabled class in the a tag instead of the li tag

Changing hover color of link in menu

I am looking to make some CSS adaptions to this site:
www.cocoto.eu
I want to change the hover color of the main nav menu items (for example "Versandkosten").
Can anyone show me the code that i need to use to achieve that? cause i am not able to find it
Thanks and sorry for this beginner question.

<ul class="main-nav">
<li class="nav-item">
<a class="nav-link">ES24</a>
<a class="nav-link">Versandkosten</a>
</li>
</ul>
So here by using the following syntax : class1>class2>class3, you can style the link on hover as wanted.
.main-nav>.nav-item>.nav-link:hover {
color: red;
}
Check this link for details of different states of a link :
https://www.w3schools.com/css/css_link.asp

<a onMouseOver="this.style.color='#FF4223'"
onMouseOut="this.style.color='blue'"><u>Hower me</u></a><br>

.main-nav>.nav-item>.nav-link:hover {
color: yellow;
}

How to set hyperlink color for an individual link?

I am writing a very simple HTML page for selecting among a few files. The linked-to files are the current an past versions of some data file.
I want the "current" link to be in blue and the "past" links to be in light-blue. This is easily achievable through setting of the font color property in the <A ..> tag.
However, doing so means the color of visited links is not changed to purple.
An alternative is to use link, vlink and alink properties in the <body ...> tag, as explained here.
But doing so means that all links look the same. Apparently, the link, vlink and alink properties do not work when put in the <A ...> tag context.
How can I set a different "visited link" color per link?

You can use a:visited selector for that:
<html>
<style>
a.past:visited {
color: light-blue;
}
a.current:visited {
color: blue;
}
</style>
<body>
<a class="current" href="#">Link</a>
<a class="past" href="#">Link</a>
</body>
</html>

Change <a>'s hover / active color within the element tag

I'm working on an e-mail signature (so obviously I don't have an attached .css stylesheet) is there any way to set a link's hover / active color (maybe within the tag?)
Thanks for taking the time to answer :)
Tombs
Duplicate here:
How to write a:hover in inline CSS?

You can't do so within HTML as active and hover are CSS selectors and not attributes. So although you could set the height and width of an object in HTML, you would have to use CSS to use the active and hover selectors.
Like such
HTML
<ul>
<li><a class="links" href="#"> Link1 </a></li>
<li><a class="links" href="#"> Link2 </a></li>
<li><a class="links" href="#"> Link3 </a></li>
</ul>
CSS
ul il a.links:hover{
color: blue;
}
ul il a.links:hover{
color: royalblue;
}

Half of the mail clients do not support this functionality.
See: http://www.campaignmonitor.com/css/

you may only be able to style the active color, with this being a recommended approach
<span style="color:#ff00ff">this is a link</span>
style the <a> tag as well as wrap it in a similar color style <span> tag for reinforcement.
you wont be able to style a hover state with in-line css unfortunately.
source:
http://24ways.org/2009/rock-solid-html-emails/

Try using
<h1 style="---">
like
<h1 style="color:red">hi</h1>

Apply CSS properties to class but only if element has another specific class

I have this html:
<li class="arrow branches"></li>
<li class="arrow branches"></li>
<li class="arrow branches"></li>
<li class="arrow"></li>
<li class="arrow"></li>
<li class="arrow"></li>
I want to give css commands only for "arrow branches" classes,how can I give them css that wont effect the "arrow" classes?

Create the class .branches:
.branches{
color:#f00;
}
If you want to apply it to only those elements that have branches and arrows then put them together:
.arrow.branches{
color:#f00;
}
But if you want to apply it to more than one class thats easy too:
.branches, .otherClass{
color:#f00;
}

It's extremely simple:
li.arrow.branches
{...styles...}
This selects LI elements with the classes branches AND arrow, but not arrow on its own.

.arrow.branches { // your css }
Works only for elements with both classes.