2014
Mar
27




CSS Specificity

Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element. So in the specificity value below would be 122 (0,1,2,2 or 0122): 100 for #content, 10 for .data, 10 for :hover, 1 for body and 1 for img.

Example
  1. body #content .data img:hover
  • The first digit (a) is always zero, unless there is a inline style attribute applied to that element.
  • The second digit (b) is the sum of the number of IDs in that selector.
  • The third digit (c) is the sum of the number of classes, attributes (like input[type="text"]), and pseudo-classes (like :hover) in that selector.
  • The fourth digit (d) counts the elements (like table, p, div, etc.) and pseudo-elements (like :before, :after, etc.).
  • The universal selector (*) has a specificity of zero.
  • If two selectors have the same specificity, the one that comes last on the stylesheet will be applied.

CSS Selectors

Universal Selectors

*

The star symbol will target every single element on the page.

Example
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }

The * can also be used with child selectors.

Example
  1. #container * {
  2. color: gray;
  3. }

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE6+ Yes Yes

ID Selectors

#selector

Example
  1. #container * {
  2. margin: 0 auto;
  3. width: 960px;
  4. }

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE6+ Yes Yes

Class Selectors

.selector

Example
  1. .error {
  2. color: red;
  3. }

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE6+ Yes Yes

Attribute Selectors

[att=value]

The attribute has to have the exact value specified.

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE7+ Yes Yes

[att~=value]

The attribute's value needs to be a whitespace separated list of words.

Example
  1. div[class="container bordered"] {
  2. border: 1px solid #333;
  3. }

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE7+ Yes Yes

[att|=value]

The attribute's value is exactly value or starts with the word value and is immediately followed by -, so it would be "value-".

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE7+ Yes Yes

[att^=value]

The attribute's value starts with the specified value.

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE7+ Yes Yes

[att$=value]

The attribute's value ends with the specified value.

File Type Icon
  1. /*******************
  2. Add a different icon next to each different type of file.
  3. *******************/
  4. a[href$=".jpg"] {
  5. background: url(jpeg.gif) no-repeat left 50%;
  6. padding: 2px 0 2px 20px;
  7. }
  8. a[href$=".pdf"] {
  9. background: url(pdf.gif) no-repeat left 50%;
  10. padding: 2px 0 2px 20px;
  11. }
  12. a[href$=".doc"] {
  13. background: url(word.gif) no-repeat left 50%;
  14. padding: 2px 0 2px 20px;
  15. }

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE7+ Yes Yes

[att*=value]

The attribute's value contains the specified value.

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE7+ Yes Yes

input[type="text"]

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE7+ Yes Yes

Child Selectors

.parent-selector > .child-selector

It allows you to target elements that are direct children of a particular element.

Example
  1. .container > p {
  2. color: #333;
  3. }

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE7+ Yes Yes

Sibling Combinators

Adjacent Sibling Combinator: selector + selector

The elements in the selector have the same parent, and the second one must come immediately after the first.

Example
  1. .container p {
  2. color: black;
  3. }
  4. .container h4 + p {
  5. color: red;
  6. }
Example
  1. <div class="container">
  2. <p>I am black color.</p>
  3. <p>I am black color.</p>
  4. <h4>Heading</h4>
  5. <p>I am red color.</p>
  6. <p>I am black color.</p>
  7. </div>

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE7+ Yes Yes

General Sibling Combinator: selector ~ selector

The elements in the selector have the same parent, and the second selector doesn't have to immediately follow the first one.

Example
  1. .container p {
  2. color: black;
  3. }
  4. .container h4 ~ p {
  5. color: red;
  6. }
Example
  1. <div class="container">
  2. <p>I am black color.</p>
  3. <p>I am black color.</p>
  4. <h4>Heading</h4>
  5. <p>I am red color.</p>
  6. <p>I am red color.</p>
  7. </div>

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE7+ Yes Yes

Pseudo-classes

Dynamic Pseudo-classes

There are two types of dynamic pseudo-classes: link and user action ones. The link are :link and :visited, while the user action ones are :hover, :active and :focus.

IE6 only allows the :hover pseudo-class to be applied to link elements (a) and only IE8 accepts the :active state on elements other than links.

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE6+ (IE6 only allows the :hover pseudo-class) Yes Yes

selector:first-child

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE7+ Yes Yes

The Language Pseudo-class :lang()

It allows you to match an element based on its language.

Example
  1. :lang(en) > a#flag {
  2. background-image: url(english.gif);
  3. }
  4.  
  5. :lang(fr) > a#flag {
  6. background-image: url(french.gif);
  7. }

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE8+ Yes Yes

CSS 3 Pseudo-classes

:target

The UI Element States Pseudo-classes

Some HTML elements have an enable or disabled state (for example, input fields) and checked or unchecked states (radio buttons and checkboxes). These states can be targeted by the :enabled, :disabled or :checked pseudo-classes, respectively.

Example
  1. input:disabled {
  2. background: #eee;
  3. border: 1px solid #ccc;
  4. color: #666;
  5. }
  6.  
  7. input[type="checkbox"]:checked {
  8. color: red;
  9. }

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE9+ Yes Yes

CSS 3 Structural Pseudo-classes

selector:nth-child(n)

The :nth-child(n) pseudo-class allows you to target one or more specific children of a parent element.

Example
  1. .container p {
  2. color: black;
  3. }
  4.  
  5. .container p:nth-child(2) {
  6. color: red;
  7. }
Example
  1. <div class="container">
  2. <p>I am black color.</p>
  3. <p>I am red color.</p>
  4. <p>I am black color.</p>
  5. <p>I am black color.</p>
  6. <div>

In this case, the third and sixth p elements will be red color.

Example
  1. .container p {
  2. color: black;
  3. }
  4.  
  5. /*******************
  6. The following expression will match every third p element starting from the first p element.
  7. *******************/
  8. .container p:nth-child(3n) {
  9. color: red;
  10. }
Example
  1. <div class="container">
  2. <p>I am black color.</p>
  3. <p>I am black color.</p>
  4. <p>I am red color.</p>
  5. <p>I am black color.</p>
  6. <p>I am black color.</p>
  7. <p>I am red color.</p>
  8. <div>

In this case, every third p elements will be red color starting from the second p element.

Example
  1. .container p {
  2. color: black;
  3. }
  4.  
  5. /*******************
  6. The following expression will match every third p element starting from the second.
  7. *******************/
  8. .container p:nth-child(3n+2) {
  9. color: red;
  10. }
Example
  1. <div class="container">
  2. <p>I am black color.</p>
  3. <p>I am red color.</p>
  4. <p>I am black color.</p>
  5. <p>I am black color.</p>
  6. <p>I am red color.</p>
  7. <p>I am black color.</p>
  8. <div>
Example
  1. .container p {
  2. color: black;
  3. }
  4.  
  5. .container p:nth-child(-n+4) {
  6. color: red;
  7. }
Example
  1. <div class="container">
  2. <p>I am red color.</p>
  3. <p>I am red color.</p>
  4. <p>I am red color.</p>
  5. <p>I am red color.</p>
  6. <p>I am black color.</p>
  7. <p>I am black color.</p>
  8. <div>
Example
  1. .container p {
  2. color: black;
  3. }
  4.  
  5. .container p:nth-child(even) {
  6. color: red;
  7. }
Example
  1. <div class="container">
  2. <p>I am black color.</p>
  3. <p>I am red color.</p>
  4. <p>I am black color.</p>
  5. <p>I am red color.</p>
  6. <p>I am black color.</p>
  7. <p>I am red color.</p>
  8. <div>

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Firefox 3.5+ IE9+ No Yes

selector:nth-last-child(n)

The :nth-last-child(n) pseudo-class works basically as the :nth-child(n) pseudo-class, but it starts counting the elements from the last one.

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Firefox 3.5+ IE9+ Yes Yes

selector:nth-of-type(n)

The :nth-of-type(n) pseudo-class works just like the :nth-child(n), with the difference that it only counts children that match the element in the selector.

Example
  1. .container p {
  2. color: black;
  3. }
  4.  
  5. .container p:nth-child(2) {
  6. color: red; /* It doesn't work. */
  7. }
  8.  
  9. .container p:nth-of-type(2) {
  10. color: red;
  11. }
Example
  1. <div class="container">
  2. <p>I am black color.</p>
  3. <h4>I am title.</h4>
  4. <p>I am red color.</p>
  5. <p>I am black color.</p>
  6. <p>I am black color.</p>
  7. <p>I am black color.</p>
  8. <p>I am black color.</p>
  9. <div>

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Firefox 3.5+ IE9+ No Yes

selector:nth-last-of-type(n)

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Firefox 3.5+ IE9+ Yes Yes

selector:last-child

The :last-child pseudo-class targets the last child of a parent element.

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE9+ Yes Yes

selector:only-child

The :only-child pseudo-class represents an element that is the only child of its parent.

Example
  1. .container p:only-child {
  2. color: red;
  3. }
Example
  1. <div class="container">
  2. <p>I am red color.</p>
  3. </div>

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE9+ Yes Yes

selector:first-of-type, :last-of-type

The :first-of-type pseudo-class is used to target an element that is the first of its type within its parent.

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Firefox 3.5+ IE9+ Yes Yes

selector:only-of-type

The :only-of-type pseudo-class represents an element that is the only child of its parent with the same element.

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Firefox 3.5+ IE9+ Yes Yes

:empty

The :empty pseudo-class represents an element that has no content within it.

Example
  1. .container .content:empty {
  2. display: none;
  3. }

The Negation Pseudo-class

selector:not(selector)

The negation pseudo-class, :not(), lets you target elements that do not match the selector that is represented by its argument.

Example
  1. div:not(#container) {
  2. color: red;
  3. }

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE9+ Yes Yes

Pseudo-elements

selector:before, selector:after

The :before and :after pseudo-elements are used to insert content before or after an element's content, purely via CSS.

Example
  1. #container ol > li:before {
  2. background: #333;
  3. border-radius: 20px;
  4. color: #fff;
  5. content: counter(li);
  6. counter-increment: li;
  7. height: 20px;
  8. left: -25px;
  9. position: absolute;
  10. top: 1px;
  11. width: 20px;
  12. }
Example
  1. .clearfix:before,
  2. .clearfix:after {
  3. content: " ";
  4. display: table;
  5. }
  6. .clearfix:after {
  7. clear: both;
  8. }

Browser Compatibility

Chrome Firefox IE Opera Safari
Yes Yes IE6+ Yes Yes

selector::first-letter

The ::first-letter pseudo-element will match the first letter of a block, unless it's preceded by some other content, like an image, on the same line.

selector::first-line

The ::first-line pseudo-element will match the first line of a block, inline-block, table-caption or table-cell level element.

Related Posts


回應 (Leave a comment)