Style Tags

by nate

HTML

<h1>Styling tags without modifying markup</h1>

<h2>Using CSS3:</h2>

<p class="tags css3">
    <strong>Tags:</strong> <a href="http://myurl.com/tag/contentplatform/">contentplatform</a>&nbsp;<a href="http://myurl.com/tag/news/">news</a>&nbsp;<a href="http://myurl.com/tag/javascript/">javascript</a>&nbsp;<a href="http://myurl.com/tag/questions/">questions</a>
</p>

<h2>Using jQuery:</h2>

<p class="tags nocss3">
    <strong>Tags:</strong> <a href="http://myurl.com/tag/contentplatform/">contentplatform</a>&nbsp;<a href="http://myurl.com/tag/news/">news</a>&nbsp;<a href="http://myurl.com/tag/javascript/">javascript</a>&nbsp;<a href="http://myurl.com/tag/questions/">questions</a>
</p>

CSS

body {
    font-family: Calibri, Trebuchet MS, sans-serif;
}

h1 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 1em;
}

h2 {
    font-size: 18px;
    font-weight: bold;
}

.tags {
    margin: 1em 0;   
}

.tags a {
    background-color: Crimson;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    -moz-border-radius: 3px;
    padding: 0 6px;
    text-decoration: none;
    -webkit-border-radius: 3px;
}

/* Using CSS3 Substring-Matching Attribute Selectors
http://www.w3.org/TR/css3-selectors/#attribute-substrings */
.tags.css3 a[href*="contentplatform"] {
    background-color: DarkCyan;
}

.tags.css3 a[href*="news"] {
    background-color: DodgerBlue;
}

.tags.css3 a[href*="javascript"] {
    background-color: MediumOrchid;
}

.tags.css3 a[href*="questions"] {
    background-color: OliveDrab;
}

/* Using jQuery */

.tags.nocss3 a.contentplatform {
    background-color: DarkCyan;
}

.tags.nocss3 a.news {
    background-color: DodgerBlue;
}

.tags.nocss3 a.javascript {
    background-color: MediumOrchid;
}

.tags.nocss3 a.questions {
    background-color: OliveDrab;
}

JavaScript

/* If styling is essential for all browsers, you can use JS */

(function($) {
    $(function() {
        $('p.nocss3').children('a').each(function(i, tag) {
            var tag = $(tag),
                tagName = tag.text();
          
            tag.addClass(tagName);  
        });
    });                                        
})(jQuery);