CSS for changing color of 2nd word in h2

css, html

Solution

For this to work (there is no `:secondWord` pseudo-selector, sadly) you have to use JavaScript, so I'll offer a relatively simple suggestion that allows you to define a class-name to use as a style-hook:

Object.prototype.styleSecondWord = function(styleHook){
    styleHook = styleHook || 'secondWord';
    var text = '',
        words = [];
    for (var i = 0, len = this.length; i<len; i++){
        words = (this[i].textContent || this[i].innerText).split(/\s+/);
        if (words[1]) {
            words[1] = '<span class="' + styleHook + '">' + words[1] + '</span>';
            this[i].innerHTML = words.join(' ');
        }
    }
};

document.getElementsByTagName('h2').styleSecondWord('classNameToUse');

JS Fiddle demo.

The above function updated in order to allow a specific element-type to be supplied (though it'll default to a `span` if none is provided):

Object.prototype.styleSecondWord = function (styleHook, styleElem) {
    styleHook = styleHook || 'secondWord';
    styleElem = styleElem || 'span';
    var open = '<' + styleElem + ' class="' + styleHook + '">',
        close = '</' + styleElem + '>',
        text = '',
        words = [];
    for (var i = 0, len = this.length; i < len; i++) {
        words = (this[i].textContent || this[i].innerText).split(/\s+/);
        if (words[1]) {
            words[1] = open + words[1] + close;
            this[i].innerHTML = words.join(' ');
        }
    }
};

document.getElementsByTagName('h2').styleSecondWord('classNameToUse', 'em');

JS Fiddle demo.

Problem

Hello is there any way i can make 2nd word in different color with in a line by using css? for ex: ``` <h2>Change color by css</h2> ``` here i want to change "color" will be different color.

Original source