Welcome to WebmasterWorld Guest from 35.173.48.224

Forum Moderators: not2easy

Message Too Old, No Replies

Style portion of a link

     
10:00 pm on Jan 9, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 16, 2002
posts:2139
votes: 1


Is it possible to style part of link text? Something like this

<div #mylink > <a class="mylinktext >Jon KIng</a></div>

I'm tyring to change the colour of just "King", the last four letters of the text with CSS.

Cannot figure a way to get to the individual chars with CSS. The chars to change are always known.

I do not have access to the html or jquery... but do have CSS and JavaScript access. Your thoughts are greatly appreciated.
11:00 pm on Jan 9, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 21, 2002
posts:771
votes: 14


<div #mylink > <a class="mylinktext >Jon KIng</a></div>

<div #mylink > <a class="mylinktext >Jon <span style="color:#FF0000;">KIng</span></a></div>
12:49 am on Jan 10, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 16, 2002
posts: 2139
votes: 1


I do not have access to the html...
2:52 am on Jan 10, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


I'm assuming <div #mylink> is actually <div id="mylink">?

<script>
var a = document.querySelector("#mylink .mylinktext");
a.innerHTML = "Jon <span style='color:#FF0000;'>King<\/span>";
</script>

Make sure document.querySelector supports the browsers you need to support.
[caniuse.com...]
2:54 am on Jan 10, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 16, 2002
posts: 2139
votes: 1


Sorry I was't clear. I have to style it using only an external css file or js file. Maybe with nth-child , last-child equation or something like that.
3:46 am on Jan 10, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


So put that code in an external js file.
4:02 am on Jan 10, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 16, 2002
posts: 2139
votes: 1


Oops.. I responded to Hoople before seeing your solution... yes indeed Fontiman I'll give it a go.
5:18 am on Jan 10, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15753
votes: 826


Maybe with nth-child, last-child equation or something like that.

I hope you weren't thinking of each word as a separate child of its parent :( Child selectors can only apply to html elements, which means you need to fiddle with the html--or with whatever process creates the html in the first place.
12:40 pm on Jan 10, 2016 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there Jon_King,
this can be done, without resorting to "JavaScript", quite simply
with "CSS", which you may then append to your external file. ;)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>

<link rel="stylesheet" href="#" media="screen">

<style media="screen">
#mylink .mylinktext {
position:relative;
}
#mylink .mylinktext::before {
position:absolute;
right:0;
content:'King';
color:#f00;
text-decoration:underline;
}
</style>

</head>
<body>
<div id="mylink">
<a class="mylinktext" href="#">Jon King</a>
</div>
</body>
</html>


birdbrain
4:25 pm on Jan 10, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 16, 2002
posts: 2139
votes: 1


Ahhh so much to learn! Thanks Birdbrain.
4:40 pm on Jan 10, 2016 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


No problem, you're very welcome. ;)



birdbrain
8:41 pm on Jan 11, 2016 (gmt 0)

New User

joined:Jan 11, 2016
posts:1
votes: 0


Birdbrain I also thank you so much...:)
good solution.