How can I make each odd letter in my header h1 to have an orange color

Question

I'm a bit confused as to how I can go about this. I tried: h1:nth-child(odd) { color: orange; }
but that didn't work.

Here's my html:

<body>
  <div class="header">
    <header>
      <h1> Simple & Responsive Flexbox Website! </h1>
    </header>
  </div>
</body>

there is no way to do this wih selector ... you need some color trick, like gradient, etc — Temani Afif, Apr 12 '18 at 08:42
check this https://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character to have some ideas .. and there is no selector for letters, — Temani Afif, Apr 12 '18 at 08:45
I don't want half a letter to be coloured, I want each odd letter to be fully coloured. If that makes sense? @TemaniAfif — codfish555, Apr 12 '18 at 08:53
i gave hint :) i know what you want .. you need to chekc this question to get some ways on how to color text partially — Temani Afif, Apr 12 '18 at 08:54

score 3 · Accepted Answer · answered Apr 12 '18 at 09:17

var myColors = ["red", "green"];
$('.text-content').find('h1').each(function(){
  var $el = $(this),
    text = $el.text(),
    len = text.length,
    coLen = myColors.length,
    newCont = '';
  for(var i=0; i<len; i++){
    newCont += '<span style="color:'+ myColors[i%coLen] +'">'+ text.charAt(i) +'</span>';
  }
  $el.html(newCont);    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="text-content">
    <h1>Simple & Responsive Flexbox Website!</h1>
</span>

score 2 · Answer 2 · answered Apr 12 '18 at 09:14

See below. You can used http://letteringjs.com/ if you like to wrap characters in span tags.

h1>span {
color: blue;
}
h1>span:nth-child(odd) {
color: red;
}

<h1>
  <span>S</span>
  <span>i</span>
  <span>m</span>
  <span>p</span>
  <span>l</span>
  <span>e</span>
</h1>

score 0 · Answer 3 · answered Apr 12 '18 at 08:54

You would need to wrap each letter in individual spans (if you wanted to only use HTML), then target the :odd spans.

<style> h1 span:odd { color: orange; } </style>

<h1>

<span>S</span>

<span>i</span>

<span>m</span>

<span>p</span>

<span>l</span>

<span>e</span>

</h1>

Using javascript might open up some other opportunities to make this more efficient, or simpler to write, but will likely still use the span method to delegate the color property to individual characters.

score 0 · Answer 4 · answered Apr 12 '18 at 09:08

Here is an idea that will only work with monospace font:

h1 {
  font-size: 20px;
  font-family: monospace;
  background: repeating-linear-gradient(to right, orange 0, orange 1ch, black 1ch, black 2ch);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1> Simple & Responsive Flexbox Website!</h1>

How can I make each odd letter in my header h1 to have an orange color

4 Answers4