This is a demo for CSS Vocabulary You would need modern browsers to view it best (But webkit browsers have a major bug). Read more at CSS Vocabulary.

Hover on each of the lines and terms to see what they are called.

          #lovelyweather:first-child Pseudo Class, .clear::after Pseudo Element Selectors
          { A Declaration Block
        	clear: CSS Property both Keyword; A Declaration
        	color: CSS Property#fff Value; A Declaration
          } A Declaration Block Rule Set

Pseudo Class Test

This should be in red, but it is not, as the first child is the h2 not article.
But this is in green, because it is the last child.

Pseudo Elements Test

This is the first line. With Pseudo-elements, the first line gets assigned its own element in the document tree. This is unheard of using CSS to modify the HTML content.

Combinators

This is selected with a child combinator with the parent #combinators, so it has a 10em indent.

This text is wrapped in a div within. So it doesn’t get an additional offset (which it would if a child selector was used).

This gets selected with the immediate sibling combinator. This is why it looks dark blue.

This gets selected with the general sibling combinator with the div. Hence, it is red.

Vendor Prefixes

Not all vendor prefixes are part of web standards. Here are a few examples of those that are not:

This will have rounded cornered outline in Firefox.

This will have a text color and even a text stroke in Webkit-based browsers (Chrome and Safari).

This will become twice as large when you hover in IE9.