These days, if you assign IDs to elements only so you can style them, you are probably doing it wrong. CSS 2.1 and CSS 3 introduced a number of powerful selectors that can make your layouts cleaner, and your stylesheets more awesome.

These are supported in all major browsers including IE9 and up.

CSS >

/* Selectors for matching the first letter and line: */
p::first-letter{
    font-size: 24px;
}

p::first-line{ font-style: italic; }
/* Changes background and color of selected text inside <p> */ p::selection { color: #333; background: #F4F4F4; }
/* Creates generated content before and after element <p> */ p:before, p:after{ content: '...'; }
/* Selects first and last element */ .elem:first-child, .elem:last-child{ margin: 0; }
/* Targets first and last child of <h2> element on the page regardless of its position/order */ h2:first-of-type, h2:last-of-type{ padding: 0; }
/* Selects last <p> inside <div> regardless of its order */ div p:nth-last-of-type(1) { background: red; }
/* Targets elements which are the only child of its parent */ div p:only-child { color: gray; }
/* Targets odd and even number elements */ .elem:nth-child(odd){ background-color: red; } .elem:nth-child(even){ background-color: blue; }
/* Selects sixth element */ .elem:nth-child(6){ color: #000; }
/* Targets only the first four <li> elements within <ul> */ ul li:nth-child(-n+4) { color: blue; }
/* Styles the element which contains any child elements */ .elem:not(:empty){ position: relative; } /* Selects all divs, except <div id="container"> */ div:not(#container) { color: blue; }
/* Target elements by attribute */ .elem[data-foo=bar1]{ background-color: #aaa; } .elem[data-foo=bar2]{ background-color: #d7cb89; }
/* The attribute value should start with bar. This matches both of the above elements */ .elem[data-foo^=bar]{ width: 15px; height: 15px; }
/* Selects all checkboxes that are checked */ input[type="checkbox"]:checked { margin-left: 15px; }
/* Selects all <ul> elements that resides immediately inside class .elem */ .elem > ul{ padding: 0; }
/* Selects <p> element immediately preceded by class .elem */ .elem + p{ color: #FFF; }
/* Selects all <div> elements preceded by class .elem */ .elem ~ div{ color: #000; }
/* Selects <p> with language attribute fr e.g */ p:lang(fr) { color: #FFF; }
/* When URL is https://URL/#comments - selects <h2 id="comments"> */ h2:target { background: #F2EBD6; }