How to apply CSS to second word in a string?


Tags: css

Problem :

If I have the following string: John Smith, how could I use CSS to set font-weight: bold on the second word in order to achieve: John Smith.

Can this be done in pure CSS?

Update: I am retrieving user's name from the server, so in my template it is #{user.profile.name}.



Solution :

Since a js solution was suggested and pure CSS isn't presently possible: Live demo (click).

Sample markup:

<p class="bold-second-word">John Smith</p>
<p class="bold-second-word">This guy and stuff.</p>

JavaScript:

var toBold = document.getElementsByClassName('bold-second-word');
for (var i=0; i<toBold.length; ++i) {
  boldSecondWord(toBold[i]);
}

function boldSecondWord(elem) {
  elem.innerHTML = elem.textContent.replace(/\w+ (\w+)/, function(s, c) {
    return s.replace(c, '<b>'+c+'</b>');
  });
}

    CSS Howto..

    How to change CSS with jquery?

    How can I make a CSS3 hover transition run only once and not 'rewind' after the user 'un-hovers'?

    How to load chosen alternative css as default css? [closed]

    How make contents as a grid in a ScrollPanel in GWT project using UIBinder

    How erase extra black on drop down menu

    How do I go about dynamically splitting a body of text into two even columns with plain Javascript (no JQuery)?

    How to get two divs the same height depending on which one has the bigger height in CSS [duplicate]

    How to Change blue background selection color from image using css

    How to make combination of images responsive?

    How to align an absolute DIV of unknown height outside a “relative” parent by CSS?

    How do I make my lightbox not scroll?

    How can i apply background-image to low div

    How to make outer div inherit height of inner, non-floated divs?

    How do I create a CSS class Union?

    How to style a

    inside a div with css [closed]

    How to create a chrome extension using multiple css and js files?

    How to play css transition effect from javascript

    How to layout a form with 1 input field + submit button so that
    and
    backgrounds do not shine through?

    how to include css style to modify existing placeholder

    How to style Anchor in GWT?

    how do I modify a :hover style using JavaScript / jQuery?

    How can I make Non-English quotation marks with a help of CSS? [closed]

    How to properly adjust CSS Form Select field if content is larger than image

    How to center a text nav bar with CSS

    How To Dark Image Background in CSS on hover?

    How do I change button color on press in bootstrap?

    How to make CSS columns in a div?

    How to remove the particular CSS style (set through CSS file) from an HTML list

    Meteor: How can I use Spacebars to apply different CSS elements?

    how to combine multiple css class selectors into one?