JSON CSS Selectors Demonstration

Using JSON CSS a large number of custom selectors are possible (as well as all the basics).

This is a header. It is blue.

This is a subheader. It's red.

This is some plain old text. This is some text that contains the word 'free', so it gets highlighted!

This is an internal link, and This is an external link.

JSON CSS

{
    "h2": {
        "color": "blue"
    },

    ".subheader": {
        "color": "red"
    },

    "span:contains(free)": {
        "background-color": "yellow"
    },

    "a[href^=http]": {
        "background": "transparent url(externalLink.jpg) top left no-repeat",
        "padding-left": "14px"
    },

    "#testTable tr:odd": {
        "background-color": "#9CF"
    },

    "div": {
        "margin": "10px 0",
        "width": "250px"
    },
    
    "div:first": {
        "background-color": "lightgreen"
    }
}