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;
}