Here’s a list of CSS selectors that you should be aware of and using in your web design projects. This isn’t all of the CSS selectors, it a list of the selectors that I think are most useful and are supported by the majority of browsers including I.E. 7 and up.
With I.E. 6 losing browser share day after day, I believe it’s far past time to start using these CSS selector in your projects. By using them you will save time and produce lighter weight html pages.
ID
#value { style }
The following will style the text red in a div with an ID of idtest.
#idtest { color:red; } |
<div id="idtest">Test for ID.</div> |
Class
.value { style }
The following will style the text black in all divs with a class of classtest.
.classtest { color:black; } |
<div class="classtest">Test for ID</div> |
Type
value { style }
The following will give all H1 tags a black background. You use this selector to style lists, forms, headers and more.
h1 { background:black; } |
<h1>Title Test</h1> |
Universal
* { css }
The following will give every element on the page a white background.
* {background:white;} |
This can also be used to style every element within a parent element.
The following will give every element within a DIV with an id of main a 20px margin.
div#main *{ margin:20px; } |
Descendent
X Y { style }
The following add a red background to every paragraph in a div with an id of test. Other element within the div will not be effected.
div#test p { background:red; } |
<div id="test"> <p>Descendent Test</p> <ul> <li>List item 1</li> <li>List item 2</li> </ul> </div> |
Adjacent Siblings
X + Y { style }
The following will style the first paragraph after the h1 tag, the second paragraph will not be effected.
h1 + p { text-indent:5px; color:red;} |
<h1>Hello Adjacent Siblings</h1> <p>Hello Adjacent Siblings</p> <p>Hello Adjacent Siblings</p> |
Child
X > Y { style }
The following adds a black background to the paragraphs that are immediate children of the body. Paragraph two will not be effected
body > p { background: black;} |
<body> <p>Paragraph one</p> <div><p>Paragraph two</p></div> <p>Paragraph three</p> </body> |
General Sibling
X ~ Y { style }
The following will add a black background to each sibling paragraph that follows a H1.
H1 ~ P { text-decoration:underline; color: red; } |
<p>Paragraph text not styled.</p> <h1>Header One</h1> <h2>Header Two</h2> <p>Paragraph text styled.</p> <div><p>Paragraph text not styled.</p></div> <p>Paragraph text styled.</p> |
First-Child
:first-child { style }
The following will add a black background to the first list in an un-ordered list
li:first-child{background:black;} |
<ul> <li>Styled list item.</li> <li>Unstyled list item.</li> </ul> |
First Letter
:first-letter { style }
The following will add a black background to the first letter in a paragraph.
p:first-letter{background:black;} |
<p>First letter test.</p> |
First Line
:first-line { style }
The following will add a black background to the first line in paragraph. The line after the break will not be styled.
p:first-line{background:black;} |
<p>First line styled.<br />This line not styled.</p> |
Existense
[att] { style }
The following will give every element with a “role” attribute a black background.
[role] { background:black; } |
<div class="test" role="">Test for Existence.</div> |
Equality
[att=value] { style }
The following will give every element with a “role” attribute that has a value of “imequal” a red background.
[role=imequal] { background:red; } |
<div role="imequal">Test for Equality.</div> |
The following CSS Selectors are not supported by I.E. 6-8.
Nth Child
No I.E. 6-8 support
:nth-child(n) { style }
The following will add a black background to the third list item in an un-ordered list, starting from the beginning of the list.
li:nth-child(3) |
<ul> <li>Unstyled list item</li> <li>Unstyled list item</li> <li>Styled list item</li> </ul> |
Nth Last Child
No I.E. 6-8 support
:nth-last-child(n) { style }
The following will add a black background to the second to last list item in an un-ordered list, starting from the end of the list.
li:nth-last-child(2) |
<ul> <li>Unstyled list item</li> <li>Unstyled list item</li> <li>Styled list item</li> <li>Unstyled list item</li> </ul> |
Last Child
No I.E. 6-8 support
:last-child { style }
Before
No I.E. 6-8 support
:before { style }
The following will add the word “Hello” to the beginning all h1 tags.
H1:before { content: "Hello "; } |
After
No I.E. 6-8 support
:after { style }
The following will add the word “Goodbye” to the end all h1 tags.
H1:after { content: " Goodbye"; } |