Selector (CSS2)

  • Specify a style for an element based on its parent. (Child)

    <P>
      <H1>Heading</H1>
    </P>
    					
    P > H1 { font-weight: bold; }

    Only apply the style if the H1 element is a child of the P element.

  • Specify a style for an element based on the previous element. (Adjacent)

    <H1>Heading</H1>
    <P>paragraph</P>
    					
    H1 + P { font-weight: bold; }

    Only apply the style to the 'P' element if the H1 element came before the P element.

  • Specify a style for an element based on the it's attribute. (Attribute)

    <H1 index="0">Heading</H1>
    <H1 index="1">Heading</H1>
    					
    H1[index] { font-weight: bold; }

    Only apply the style to a H1 element with an 'index' attribute.

    H1[index="1"] { font-weight: bold; }

    Only apply the style to a H1 element with an 'index' attribute with a value of '1'.

    H1[index~="1"] { font-weight: bold; }

    Only apply the style to a H1 element with an 'index' attribute which has a value of '1' in it's (white-space separated) list of values.

    H1[index|="1"] { font-weight: bold; }

    Only apply the style to a H1 element with an 'index' attribute which has a value of '1' to start it's (hyphen separated) list of values.

  • Specify a style for an element based on a dynamic class. (Dynamic pseudo-classes)

    <A HREF="test">test string</A>
    					
    A:active { font-weight: bold; }

    Only apply the style to the 'A' element if the element is being 'activated' by a user.

    A:hover { font-weight: bold; }

    Only apply the style to the 'A' element if the element is 'pointed at' by a user.

    A:focus { font-weight: bold; }

    Only apply the style to the 'A' element if the element has been 'focused' by the user.

  • Specify a style for an element if that element is a 'hyper-link'. (Link pseudo-classes)

    <A HREF="test">test string</A>
    					
    A:link { font-weight: bold; }

    Only apply the style to the 'A' link-element if the link has not been visited.

    A:visited { font-weight: bold; }

    Only apply the style to the 'A' link-element if the link has been visited.

  • Specify a style for an element if that element is the 'first-child'. (first-child pseudo-class)

    <P>
    	<A HREF="test">test string</A>
    	<A HREF="test">test string</A>
    </P>
    					
    A:first-child { font-weight: bold; }

    Only apply the style to the 'A' element if the element is the first child.