Selectors

In CSS, pattern matching rules determine which style rules apply to elements in the document tree.

  1. Universal Selector
  2. Class selector
  3. id Selector
  4. decendant Selector
  5. Child Selector
  6. Adjacent sibling selector
  7. Attribute Selector
  8. :first-child pseudo-class
  9. link pseudo class
  10. :first-line pseudo-element
  11. :first-letter pseudo-element
  12. Grouping Selectors
1. Universal Selector

The universal selector matches any element and is denoted by the * symbol.

2. Class selector

Any HTML element can accept class attribute. The value of this attribute must be a list of identifiers separated by spaces. (e.g "class1 class2 class3").

Using class selector you can define a style for elements that belongs to a class.

3. id Selector

The id attribute is another universal attribute. The value of this attribute must be a unique identifier for the entire HTML document. You can create selectors using the id attribute.

4. descendant Selector

The descendant selectors match elements that are nested inside of other elements.

Syntax
A B {..}

Matches any B element that is inside an A element. (B is an arbitrary descendant of A)

5. Child Selector

The child selectors match element that is immediately inside an element.

Syntax
A > B {...}

Match any element that is immediate inside an A element. (B is a direct descendant or child of A)

6. Adjacent sibling selector

The adjacent sibling selector matches if the elements have the same parent and the second element immediately follows the first element.

Syntax
A + B {...}

Matches if the element A and B have the same parent and A immediately precedes B.

7. Attribute Selector

Below are the syntax for the attribute selector.

SelectorDescription
E[attr] {}matches if the element E has an attribute attr
E[attr=val] {}matches if the element E has the attribute attr=val
E[attr~val] {}matches if the element E has an attribute attr set to a list of space-separated values that includes val.
E[attr|=val] {}matches if the element E has an attribute attr set to list of hypen-separated values that starts with val
E[attr1=val1] [attr1=val1] {}matches if the element E has an attribute attr1=val1 and an attribute attr2=val2
8. Grouping Selectors

If the same styles applies to many elements, you can group selectors in a list of selectors separated by commas.

Syntax
S1, S2, S3 {...}
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents