Style portion of a link

Forum Moderators: not2easy

Message Too Old, No Replies

Style portion of a link

Jon_King

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

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.

Hoople

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

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

Jon_King

12:49 am on Jan 10, 2016 (gmt 0)

I do not have access to the html...

Fotiman

2:52 am on Jan 10, 2016 (gmt 0)

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...]

Jon_King

2:54 am on Jan 10, 2016 (gmt 0)

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.

Fotiman

3:46 am on Jan 10, 2016 (gmt 0)

So put that code in an external js file.

Jon_King

4:02 am on Jan 10, 2016 (gmt 0)

Oops.. I responded to Hoople before seeing your solution... yes indeed Fontiman I'll give it a go.

lucy24

5:18 am on Jan 10, 2016 (gmt 0)

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.

birdbrain

12:40 pm on Jan 10, 2016 (gmt 0)

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

Jon_King

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

Ahhh so much to learn! Thanks Birdbrain.

birdbrain

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

No problem, you're very welcome. ;)

birdbrain

doctor cmptr

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

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