CSS3 Selectors

CSS works by defining the styles of the elements on a Web page using CSS rules. Rules are applied using selectors, which come in three basic varieties:

• HTML selectors are used to reference a specific tag; 
• Class selectors, which are applied individually to elements; 
• An ID selector that is applied to a single element on the page. 

You will use these three basic selectors constantly, and they are the best place to start.

Here is a list of CSS3 Selectors:

• :root - is the top level element in a document Compatibility: FF1.5, O9.5, S3.1,C3
• :empty - has no children Compatibility: FF1.5, O9.5, S3.1,C3
• :only-child - has no siblings Compatibility: FF1.5, O9.5, S3.1,C3
• :only-of-type - has its unique selector among its siblings Compatibility: FF1.5, O9.5, S3.1, C3
• :nth-of-type(n) - is the nth element with that selector Compatibility: FF1.5, O9.5, S3.1,C3
• :nth-last-of-type(n) - is the nth element with that selector from the last element with that selector Compatibility: FF1.5, O9.5, S3.1, C3
• :last-child - is the last child in the parent element Compatibility: FF1.5, O9.5, S3.1, C3
• :first-of-type - is the first of its selector type in the parent element Compatibility: FF1.5, O9.5, S3.1, C3
• :last-of-type - is the last of its selector type in the parent element Compatibility: FF1.5, O9.5, S3.1, C3
• :not(s) - is not using specific selectors Compatibility: FF1.5, O9.5, S3.1, C3
• [attr^="value"] - Begins with has specified attribute equal to exact value at beginning
• [attr$="value"] - Ends With has specified attribute equal to exact value at end
• [attr*="value"] - Contains has specified attribute equal to exact value anywhere

Here are examples:

• Alice
• The White Rabbit
• The Mad Hatter
• The Queen of Hearts
• The Door Mouse

CSS3 Gradient Background

Linear Gradient 

Top → Bottom:

1. /* fallback */
2. background-color: #1a82f7;
3. background-repeat: repeat-x;
4.  
5. /* Safari 4-5, Chrome 1-9 */
6. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
7.  
8. /* Safari 5.1, Chrome 10+ */
9. background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
10.  
11. /* Firefox 3.6+ */
12. background: -moz-linear-gradient(top, #2F2727, #1a82f7);
13.  
14. /* IE 10 */
15. background: -ms-linear-gradient(top, #2F2727, #1a82f7);
17. /* Opera 11.10+ */
18. background: -o-linear-gradient(top, #2F2727, #1a82f7);

Here is the result:

Left → Right

1. /* fallback */
2. background-color: #1a82f7;
3. background-repeat: repeat-y;
5. /* Safari 4-5, Chrome 1-9 */
6. background: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727));
8. /* Safari 5.1, Chrome 10+ */
9. background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
10.  
11. /* Firefox 3.6+ */
12. background: -moz-linear-gradient(left, #2F2727, #1a82f7);
13.  
14. /* IE 10 */
15. background: -ms-linear-gradient(left, #2F2727, #1a82f7);
16.  
17. /* Opera 11.10+ */
18. background: -o-linear-gradient(left, #2F2727, #1a82f7);

Here is the result:

With Even Stops:

1. /* fallback DIY*/
2.  
3. /* Safari 4-5, Chrome 1-9 */
4. background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727));
5.  
6. /* Safari 5.1+, Chrome 10+ */
7. background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
8.  
9. /* Firefox 3.6+ */
10. background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
11.  
12. /* IE 10 */
13. background: -ms-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
14.  
15. /* Opera 11.10+ */
16. background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);

With Specified Arbitrary Stops

1. /* Safari 4-5, Chrome 1-9 */
2. background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));
3.  
4. /* Safari 5.1+, Chrome 10+ */
5. background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
6.  
7. /* Firefox 3.6+ */
8. background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
9.  
10. /* IE 10 */
11. background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
12.  
13. /* Opera 11.10+ */
14. background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

Radial Gradient 

Centered and Full Size

1. /* fallback */
2. background-color: #2F2727;
3. background-position: center center;
4. background-repeat: no-repeat;
5.  
6. /* Safari 4-5, Chrome 1-9 */  
7. background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
8.  
9. /* Safari 5.1+, Chrome 10+ */
10. background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
12. /* Firefox 3.6+ */
13. background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
14.  
15. /* IE 10 */
16. background: -ms-radial-gradient(circle, #1a82f7, #2F2727);
17.  
18. /* Opera cannot do radial gradients yet */

Positioned and Sized
Note: Not Consistent Among Browsers

1. /* fallback */
2. background-color: #2F2727;
3. background-position: 80% 20%;
4. background-repeat: no-repeat;
5.  
6. /* Safari 4-5, Chrome 1-9 */
7. background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#1a82f7), to(#2F2727));
8.  
9. /* Safari 5.1+, Chrome 10+ */
10. background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
11.  
12. /* Firefox 3.6+ */
13. background: -moz-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
14.  
15. /* IE 10 */
16. background: -ms-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
17.  
18. /* Opera cannot do radial gradients yet */

Shape keywords: circle, ellipse Size keywords: closest-side, closest-corner, farthest-side, farthest-corner, contain, cover