Types of Selectors in CSS

The kinds of selectors you can use include:

• a specific html element = Name selector
• something you've indicated with a special name = Class or ID selector
• something in a special position or state = Context or Pseudo-element selector

These selector types can be combined as well to produce very specific styles. For instance you could style all visited links that were in a specific section of the page, or all visited links that occurred on the first line of a paragraph (but WHY?).

CSS example with selectors

HTML example using css above

Name (html tag with no leading symbol)

This is used to style all of a particular html tag. A basic css file often contains styling for the body, text, links, headers and lists so that all pages have the same basic look. The specific css files might be used for more detailed usages. For example to style all things that are in list tag:

li {...}

and then anything inside a <li>... </li> pair would be styled that way.

Class (.label or element.label)

This is used to style things of a particular class. Classes are frequently used to designate how a thing is used - for example "quote" class might be used for all text that is a quote, "news" might designate news articles, "warning" might be used to designate error messages or warnings in the text. To style all things of class "hints" :

.hints {...}

and in the html code you'd say:

<p class="hints"> or <div class="hints">

variant: to only style a p of class "hint" you'd use this css:

p.hints {...}

ID (#id or element#id)

This is used to style particular items of a particular type. For instance if you want the particular paragraph marked "vital" to be in red, you might use this indicator. However if you wanted all things of class "vital" to be in red, you should use the class type selector as an ID can only be used once.

#firstsection {...}

and in the html code you'd say:

<p id="firstsection"> or <div id="firstsection">

but remember that the particular ID can only occur once in the html code.

Context (" " or ">" or "+")

This is used to style things based on their ancestors, parentage, or sibling order. Using a space before the element name you wish to style gets ANY element that is within the ancestor element whereas using a ">" gets ONLY those items that are direct children of the designated element and NO OTHER. The plus sign is used to indicate "siblings" - things that are immediately next to each other in the code - neither is inside the other.

examples:

• to specify ANY item inside another use space such as:
  div p {}
  which is read "every p inside a div"
• to specify only the FIRST item inside another use ">" such as:
  

div > p {}
which is read "for any p which is a first-level child of a div"

For instance, if I want all first level p inside a div to be green, but grandchildren of the div to be normal color I could use this css:

div > p {color:#096; /*green*/};

and get this result:

p inside a div

p inside a ul inside a div - not green because the p is FIRST inside a ul. The ul is its parent and the div is its grandparent.

Whereas to turn everything inside the div green I could use the more general selector which is the space rather than the ">" sign.

div p {color:#096; /*green*/};

Part of an element (:pseudo element)

The pseudo element allows you to do something special to a part of or a special state of an html element. This is most commonly used with the "a" tag to style links as in a:visited or a:link. The other pseudo elements are rarely used.

All of the allowed elements for pseudo classes are:

• common styles for links (define in this order for best results (use this phrase to help remember the right order: LoVe HAte = Link, Visted, Hover, Active)
  • link
    • to make links brown with no underline, use this:
      a:link { color: brown; text-decoration: none; }
  • visited
    • this affects the color of links already clicked during this session
      a:visited { ..... }
  • hover
    • this affects the link color when the mouse hovers over it
      a:hover { ..... }
  • active
    • This affects the link color as it is clicked
      a:active { ..... }
• hover (styles things which the mouse is pointing to, equivalent to onMouseOver in javascript)
• first-letter
• first-line
• first-child
• focus (styles things selected by a keyboard stroke)
• before (prefixing something to an element with css)
• after (adding a suffix to an element with css)
• lang() this refers to spoken language such as english or french that is specified in the meta tag
• left (for printing style sheets only - refers to even-numbered pages)
• right (for printing style sheets only - refers to odd-numbered pages)