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