Targeting letters within a word to change colour using CSS or JS?

Question

I'm trying to figure out if there's a quicker way to write something like this:

<span class="brandname"><span style="color: #0399f0">Company</span>Name</span> <span class="tagline">TagLine</span> 

What should happen is CompanyName gets wrapped in the class brandname which is a specific font, weight, and text-decoration, and then first half of the name (Company) should be in blue while while the rest of it is default (black). And then Tagline is wrapped in a class called tagline which displays a different font etc.

Does anyone know if I can just use the class brandname to target the first half of CompanyName. Looking for a way to save keystrokes for the future.

I feel like the way I'm doing it now would affect SEO. Majority of my googling has resulted in links from 2012-2014...my guess is nth-letter still doesn't exist but was worth asking for alternative.

Thanks for your help!

Answer 1

You could do something like this CSS only, but in this case you have to add the content you want in another color to the css part:

HTML:

<span class="brandname">Name</span> <span class="tagline">TagLine</span>

CSS:

.brandname::before {
  content: "Company ";
  color: #0399f0;
}

I myself would still prefer the solution with the 2 span elements.

Working fiddle: https://jsfiddle.net/xeyqr4w9/

Answer 2

I ran into the same before. Unfortunately I couldn't find CSS only solution.

Then I stumbled upon this pen . This uses jQuery to style the n-th selector.

/*
# nth-Everthing made with js. #

##Implemented nth- ##
:nth-letter
:nth-word


## Implemented last-##
:last-word
:last-letter

## Implemented first- ##
:first-word (faster than :nth-word(1))


## Things that work ##

Add a hover effet to each odd letter
  .className:nth-letter(odd):hover{}


Add a hover effect to :before/:after
  .className:nth-letter(odd):hover:after{}



## Things that don't and will not work ##
.className:before:nth-letter



Read more: https://css-tricks.com/a-call-for-nth-everything/
*/

(function($) {

  /*jshint  loopfunc:true, onevar:true*/
  /*global  jQuery:true, browser:true */

  $.fn.nthEverything = function() {
    var styleSuffix   = "-nthEvery",

    cssPattern        = /\s*(.*?)\s*\{(.*?)\}/g,
    cssComments       = /\s*(?!<\")\/\*[^\*]+\*\/(?!\")\s*/gm,
    partsPattern      = /([^:]+)/g,
    nthPattern        = /(\w*)-(\w*)(\((even|odd|[\+-n\d]{1,6})\))?/,
    wordSpacePattern  = /(\s*[^ ]+\s*)/g,
    wordSimplePattern = /\s+/,
    count,
    // To store the style per Selector
    parsedStyleMap = {},
    // CSS for the classes
    genCSS = '',


    runPeriods  = function(period, className, a, length, offset){
            var inBy       = 0,
                sAt        = +period,
                matches,
                n, zB, zE, bF, eF, oldN = -1;

            if (period === 'odd' || period === 'even'){
                  sAt = (period === 'odd') ? 1 : 2;
                  inBy = 2;
            }else if (/^\d+$/.test(period)){
                sAt = period - offset;
                inBy = 0;
            }else{
                zB   = /^(\+|-)?\d+/.exec(period);
                zE   = /(\+|-)?\d+$/.exec(period);

                sAt  = (zE)?+(zE[0]):1;
                inBy = (zB)?+(zB[0]):1;

                bF = (zB)?zB.length-1:0;
                eF = (zE)?zE.length:0;
                if ((period.substr(bF, period.length-eF-bF).charAt(0)) === '-'){
                   inBy*=-1;
                }
            }

        // Start index at 0;
        sAt--;

        for (n=sAt;n<length;n+=inBy){
            if (n < 0 || n === oldN) break;
            if (a[n] === undefined){
                 a[n] = className;
            }else{
                 a[n] += " "+className;
            }
            oldN = n;
        }
    },

    createSpan = function(className, content){
          return '<span class="'+className+'">'+content+'</span>';
    },


    processPeriod = function(classNames, textArray){
        var newText = '', n, className;
        for (n=0;n<classNames.length;n++){
            className = classNames[n];
            if (className === undefined){
                newText += textArray[n];
            }else{
                newText += createSpan(className, textArray[n]);
            }
        }
           return newText;
    },

    getClassNames  = function(parsedStyle, length, pFunc){
                   var classNames = new Array(length), i;
                   for (i=0;i<parsedStyle.period.length;i++){
                       runPeriods (pFunc(parsedStyle.period[i], length), parsedStyle.className[i], classNames, length);
                   }
                   return classNames;
    },

    prepareTxt = {
             word  : function(text){return text.match(wordSpacePattern);},
            letter: function(text){return text.split('');}
    },

    pseudoFunc = {
        first : {
            word :  function(period){
                     if (period === 'firstword') period = '1';
                     return period;
            }
        },
        last : {
            word : function(period, allText, length){
                    if (period === 'lastword') period = ''+allText.match(wordSpacePattern).length;
                    return period;
            }
        },
        nth : {
            letter : function (period){
                    return period;
            },
            word :  function(period){
                    return period;
            }
        }
    },

    loopRecursive = function (contents, allText, parsedStyle){
         var func = parsedStyle.func, text, length, classNames, className, cat, period;
         contents.each(function(){
            if (this.nodeType === 1){
                loopRecursive($(this).contents(), allText, parsedStyle);
            }else if(this.nodeType === 3){
                 text = prepareTxt[func](this.nodeValue);
                 length = text.length;
                 classNames = new Array(length);
                 for (var i=0;i<parsedStyle.period.length;i++){
                     className = parsedStyle.className[i];
                     cat       = parsedStyle.cat[i];
                     period    = parsedStyle.period[i];
                     runPeriods (pseudoFunc[cat][func](period, allText, length), className, classNames, length, count);
                 }

                $(this).replaceWith( processPeriod(classNames, text) );

                count += length;
            }
        });
        return count;
    },

    parse = function(css) {
       var matches, nthMatch, nthFound = false, i, thisPeriod, selectors, style, selector, parts, nth, pseudo, cat, func, period, normSelector, ident, className;


       css = css.replace(cssComments, '').replace(/\n|\r/g, '');

       while ((matches = cssPattern.exec(css)) !== null){
          selectors = matches[1].split(',');
          style     = matches[2];
          for (i=0;i<selectors.length;i++){
              selector  = selectors[i];
              parts     = selector.match(partsPattern);

              selector = parts.shift();
              nth      = parts.shift();
              pseudo   = (parts.length !== 0)?':'+parts.join(':'):'';

              if ((nthMatch = nthPattern.exec(nth)) !== null){
                   nthFound  = true;

                   cat    = nthMatch[1];
                   func   = nthMatch[2];
                   period = (nthMatch[4]!==undefined)?nthMatch[4]:cat+func;

                   normSelector = selector.replace('#','id').replace('.', 'class');
                   ident        = normSelector + func;
                   className    = normSelector + cat + func + period + styleSuffix;

                  if ((thisPeriod = parsedStyleMap[ident]) !== undefined){
                      thisPeriod.className.push(className);
                      thisPeriod.period.push(period);
                      thisPeriod.style.push(style);
                      thisPeriod.pseudo.push(pseudo);
                      thisPeriod.cat.push(cat);
                  }else{
                      parsedStyleMap[ident] = {element : selector, func : func, className : [className],  cat : [cat], period : [period], style :[style], pseudo : [pseudo]};
                  }
              }else if (nthFound === true){
                 genCSS += selector+"{"+style+"}"; // Fix chained selectors.
              }
          }
       }
    },

    applyStyles = function(){
        var id, parsedStyle, func, b;
        for (id in parsedStyleMap){
               parsedStyle = parsedStyleMap[id];
               func = parsedStyle.func;

               $(parsedStyle.element).each(function(){
                   var $this     = $(this);
                   count = 0; // Set to 0. We use a recursive Loop here
                   loopRecursive($this.contents(), $this.text(), parsedStyle);
               });

               for (b=0;b<parsedStyle.className.length;b++){
                   genCSS += "."+parsedStyle.className[b]+parsedStyle.pseudo[b]+"{"+parsedStyle.style[b]+"}";
               }
         }

         $('<style>' + genCSS + '</style>').appendTo('head');
    };

    // Build CSS Rules
    $('link[rel=stylesheet],style').each(function() {
        if ($(this).is('link')) $.get(this.href).success(function(css) { parse(css); }); else parse($(this).text());
    });

    // Apply Styles.
    applyStyles();

  };
})(jQuery);

$.fn.nthEverything();

.brandname2:nth-word(1){
  color: red;
  font-size: 25px;
}

.brandname2:nth-word(2) {
  color: green;
    font-size: 20px;
}

.brandname2 {
  color: purple;
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

</ br>

<div class="brandname2">Company name Tagline</div>