1

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.

Khokhar
  • 149
  • 2
  • 9

3 Answers3

5

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.

connexo
  • 53,704
  • 14
  • 91
  • 128
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
4

If you can adjust the HTML: <h2><span class="bg">This</span> is a Title</h2>

Then .bg {background-color:blue;}

bluemoon6790
  • 467
  • 2
  • 11
0

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 :render with Firescreenshot for Chrome

here is another demo https://codepen.io/gcyrillus/details/grOEGp just about black and white

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • I suspect you got downvoted because it was not working on Chrome – Temani Afif May 16 '19 at 21:10
  • @TemaniAfif ?? which version of chrome and which OS ? it works with mine and background-clip:text was first working in chrome, mix-blend-mode was a work around in firefox for a while. so i'm surprised. This was intend to be for the curiosity, not really the answer. the question was not clear enough about the length of the real text and about the backgrounds. It reminded some of my old test :) I do not consider downvotes without explanation, but i appreciate any feedback and mostly from the op, my understanding of english tricks me sometimes ... – G-Cyrillus May 16 '19 at 21:40
  • I am running the last version (74.0.3729.157) on Windows and background-clip never worked for me on chrome. it always needed the webkit to work for me. – Temani Afif May 16 '19 at 21:44
  • @TemaniAfif i have the same version on W7 , i guess i tuned it once like Firefox to test the latest experimental rules without prefix and forgot about it. – G-Cyrillus May 16 '19 at 21:53