:not(s)

negation pseudo-class requires "s" to be a simple selector: an element, attribute, id, class, or pseudo-class (such as :link, :hover, :active, :focus, :nth-child, :first-child, etc.). It can't take a pseudo-element (:first-line, :first-letter, :before, or :after).

Hover test adds "list-style" to hovered LI element, and also applies color with "li:not(:first-child):hover" selector. (IE8 lacks support for ":not", and doesn't resize disc to match font size.)

hover test

menu shadow tests

Please join us in congratulating somebody for something. Here is more information.

  • home
  • summer institutes
  • in-service offerings
  • annual conference
  • PSWP calendar
  • PSWP Info
  • testimonials
  • resources
  • partners

INLINE list, but SPACES added by browser — (sees newlines as white space)

INLINE list, NO spaces since they're all on one line

FINALLY, INLINE list, but NO spaces due to float:left on LI

This paragraph clears floated left LI's above.

Italic outside of paragraph.

Adjacent sibling test.

Here's the adjacent sibling.


my fixed menu

my fixed menu

my fixed menu

my fixed menu

my fixed menu

Go Right Is Here

I should be floated right. Do I drop, too?

regular paragraph regular paragraph regular paragraph

regular paragraph regular paragraph regular paragraph

regular paragraph regular paragraphregular paragraph

3 floated boxes

box #1

box #1

box #2

box #2

box #2

box #2

ID and CLASS can be assigned separate attributes. #id.class can uniquely select an element which possesses both. BUT ID already does this, so no big deal.

pseudo-class selectors: :first-line, :first-letter, :before, :after, :hover, :active; :focus

relative box relative box relative box relative box relative box relative box

This is a test of dropcaps selected based upon CSS2 pseudo-element "first-letter."

This is a test of first-line pseudo-element. Attempting here to make entire first line small-caps.

Interesting stuff:
The browser creates the space for a relative floated DIVs. If they are shifted negatively by left, top, etc. the space remains empty in the regular text.
However, you can place the relative DIV in an empty absolute DIV.
The browser DOESN'T create space for the absolute DIV, so the regular text doesn't have a blank.
But the relative DIV can still be slide around in relation to the absolute div nailed to the underlying text.

BOX 2

Sliding boxes around via position: relative, float: left; left & right properties.
Browser creates room for box before positioning it with top or left.
text Text text Text text Text text Text text Text text Text text Text text Text text Text text.

Here's a test.

heading

H2—Font Variant: Small Caps

This H3 heading has text inserted by the style sheet before this line. (Note: color can be set separately--h3:before {content: "...."; color: #888;} )

heading in div

P in DIV--italicin P in DIV

CSS TYPE: