How to change CSS of part of a header [duplicate] - html

Question

This question already has answers here:
CSS to select/style first word
(14 answers)
Style the first word of a sentence with CSS [duplicate]
(1 answer)
Color the First word of Sentence CSS [duplicate]
(5 answers)
Closed 3 years ago.
This is probably a very basic, but I have the following header tag
<h2>This is a Title</h2>
Now what I want to do is just change the colour of the text and background of 'This' and leave 'is a title' alone and on the same line as 'This' to still be a header.

Answer 1

Pseudo-elements allow you to select the first letter or first line, but not the first word.
To target This you will need to add a real element (e.g. a <span>) around it.

Answer 2

If you can adjust the HTML:
<h2><span class="bg">This</span> is a Title</h2>
Then .bg {background-color:blue;}

Answer 3

You could also look at background-clip or mix-blend-mode if you know the length where letters have to be a different color, see this has infos before an answer, since i do not believe it really fits your needs.
DEMO or snippet below.
demo includs #supports to filter rules not supported by the browser
#supports ( background-clip: text) or ( -webkit-background-clip: text) {
h2[id] {
background: linear-gradient(to right, green 2em, black 2em, black 7.75em, purple 7.75em);
color: white
}
h2[id="bgimg"] {
display:table;/* so it shrinks on the text , only for the demo*/
background:url(http://lorempixel.com/90/100) no-repeat left, url(http://lorempixel.com/170/100) tomato no-repeat right
}
h2[id] {
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
}
#supports (mix-blend-mode:screen) {
h2[class] {
position: relative;
background: white;
color: black;
}
h2[class]::before {
background: linear-gradient(to right, green 2em, black 2em, black 7.75em, purple 7.75em);
mix-blend-mode: screen;
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
}
h2[id][class] {
color:white;
background: linear-gradient(to right, green 2em, black 2em, black 7.75em, purple 7.75em);
/*reset where it works*/
background-clip:none;
mix-blend-mode:normal;
}
<h2 id>This is a Title and background-clip</h2>
<h2 id="bgimg">This is a Title and background-clip</h2>
<h2 class>This is a Title and mix-blend-mode</h2>
<h2 class id>to show the gradient used</h2>
<hr>
<p> and if it does not work ? use #supports to filter the rules .</p>
<h2> Go to default styling when css rules are not supported </h2>
<h2> regular h2 without style to avoid funny result, sends you back to question :)</h2>
What it looks like if browser understands these rules :screenshot for Chrome
here is another demo https://codepen.io/gcyrillus/details/grOEGp just about black and white