A selector is that part of a CSS rule which selects the tags which the rule affects.

Type selectors

Also known as “tag selectors”, “element selectors”

The selector is a type of tag (or element):

body

Class selectors

You invent a class name, and add that name to the value of the class attribute in one or more tags

Class selectors begin with a dot (period):

.someClassName { color:blue; }

.status-risky { color: red }

.monday { color:blue; font-size: large; }

.status-okay { color:black }

<div class=”monday status-risky”>…</div>

ID selector

You invent an ID name, and use that name as the value of the id attribute in exactly one tag:

ID selectors begin with a # (pound sign, hash sign):

#container { color: pink; }

<div id=”container”>…</div>

Compound Selectors

Combine two or more selector elements to form a compound selector

Elements in the selector form a nested set (container element on the outside, contained element on the inside)

The leftmost item is the outermost container, the rightmost item is the innermost element

#theIdName a { color: yellow; }

.monday p { color: purple}

<div class=”tuesday”><p>…</p></div>

The above selector selects all a tags (links) inside the tag whose id=”theIdName”

Grouped Selectors

Use commas to group a set of selectors

Each selector in the set will get the rule(s)

h1, h2, h3, h4, h5, h6 { font-size:12px; }

Other selectors

Many other selectors exist for more specialized purposes, see the list below ….

W3C Specifications

Selectors are a language unto themselves. Here is a summary at W3C:

http://www.w3.org/community/webed/wiki/CSS/Selectors

Type Selector

  • elementname
  • Type selector is commonly known as a tag selector, because it selects a particular type of tag
  • In other words the selector is the name of a type of tag
  • Tags are also known as elements
  • Example: …

Universal Selector

Attribute Selector

Class Selector

  • .classname
  • A class is a name that you assign
  • Class selectors begin with a period (dot, .)
  • Class selectors affect tags based on class attributes …
  • Note that tags class attributes can reference multiple classes …
  • Use class selectors when you want to affect some tags of a type, but not all tags of that type
  • Or when you want to use a naming scheme that affects several types of tag
  • Or when you want tags to be affected by several classes

ID Selector

  • #idname
  • ID selectors begin with a number sign (#), followed by a name
  • ID selectors affect tags based on id attributes: …
  • No two tags in a page may have the same ID value
  • Use ID selectors when you need to uniquely identify one specific tag on the page
  • ID’s are commonly used for page layout
  • ID attributes are more significant to JavaScript

Pseudo-classes

Dynamic pseudo-classes

The target pseudo-class

The language pseudo-class

The UI element states pseudo-classes

Structural pseudo-classes

The negation pseudo-class

Pseudo-elements

Combinators

Descendant combinator

  • A B
  • A is container, B is contained
  • Example:

Child combinator

Adjacent sibling combinator

General sibling combinator

Grouped selectors:
  • Use commas to define a group of selectors, followed by a declaration block containing rules which apply to all members of the group
  • Example, set margin and padding to zero for various types of tags:
    h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
See also