SO Question 21490222

HTML

<p id="foo" class="bar1">foo</p>
<p id="apple" class="bar1 bar2">apple</p>
<p id="orange" class="bar2 bar3">orange</p>
<p id="bananas" class="bar3">bananas!!!</p>
<p id="bananasssssss" class="bar4">bananasssssss!!!</p>

JavaScript

$( function() { // this means wait until jQuery loads; I'm using jQuery for this demo
   
    //highlight the item with id apple
    $('#apple').css('background-color', 'yellow');
    
    //bold everything with class bar1
    $('.bar1').css('font-weight', 'bold');    
    
    //italicize everything with class bar2
    $('.bar2').css('text-decoration', 'italic');
    
    //oranges are orange
    $('#orange').css('color', 'orange');
    
    //apples, oranges, and bananas are fruit
    $('.bar2,.bar3,.bar4').append(" (yep, that's a fruit)");
    
    //tell the world about bananas
    $('#bananas').css('font-size', '200%');
    $('#bananasssssss').css('font-size', '400%');
    
});