An Introduction to CSS 2.1 and CSS 3

Updated 11/13/2009: Added browser-support icons while eating soup.

Child Selector: `>`

#childSelector > p {
  color: red;
}

This paragraph is inside of a div (#childSelector) and is targeted.

This content is inside of the same div, but not inside of a paragraph, so it is not targeted
Neither is this content, for the same reason as above

This paragraph is nested one level deeper inside of a blockquote and is no longer a child of the div (#childSelector), but instead a descendent of it. It could probably be referred to as a grandchild of the div.

This paragraph is inside of a div (#childSelector) and is targeted.

Same here, woooo!

Adjacent Sibling Selector: `+`

blockquote + p {
  color: red;
}

This paragraph is not targeted because it does not directly follow a blockquote.

This content is contained inside of a blockquote.

Because this paragraph directly follows the above blockquote, it is targeted.

This paragraph is not targeted because it does not directly follow the above blockquote.

General Sibling Selector: `~`

blockquote ~ p {
  color: red;
}

This paragraph is not targeted because it does not follow a blockquote.

This content is inside of a blockquote.

Because this paragraph follows the above blockquote, it is targeted.

And this one too! This is the difference between an adjacent sibling and a general sibling. This paragraph is also targeted because it’s a general sibling of the blockquote, even though it doesn’t come directly after it.

This paragraph is not targeted because it’s inside of its own div. As a result, it’s no longer a general sibling of the blockquote.

Attribute Selector: `[name=value]`

p[class] {
  color: red;
}

This paragraph is not targeted because it does not have a class attribute.

But this paragraph does have a class attribute, so it is targeted.

p[id=exampleTwo] {
  color: red;
}

This paragraph is not targeted because, though it does have an ID attribute, its value (exampleOne) doesn’t match the CSS selector’s value.

But this paragraph has the correct value (exampleTwo), so it’s targeted.

First Child Pseudo-class: `:first-child`

ul li:first-child {
  color: red;
}

This is the very first list-item and is targeted
This is the second list-item
This is the third list-item
This is the fourth list-item
This is the fifth list-item

Last Child Pseudo-class: `:last-child`

ul li:last-child {
  color: red;
}

This is the first list-item
This is the second list-item
This is the third list-item
This is the fourth list-item
This is the very last list-item and is targeted

First Letter Pseudo-element: `:first-letter`

p:first-letter {
  color: red;
  font-size: 2em;
}

The first letter in this paragraph is targeted.

First Line Pseudo-element: `:first-line`

p:first-line {
  color: red;
}

The first line of this paragraph is targeted. Resize your browser window and watch how, regardless of where words move, only those words found in the first line remain targeted. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger.

Enabled, Disabled, and Checked Pseudo-classes: `:enabled`, `:disabled`, `:checked`

:enabled {
  border-color: green;
}
:disabled {
  border-color: red;
}
:checked {
  margin-left: 50px;
}

nth of Type Pseudo-class: `:nth-of-type(3n+1)`

ul li:nth-of-type(3n+1) {
  color: red;
}

This is the first list-item and is targeted
This is the second list-item
This is the third list-item
This is the fourth list-item and is targeted
This is the fifth list-item
This is the sixth list-item
This is the seventh list-item and is targeted
This is the eighth list-item
This is the ninth list-item
This is the tenth list-item and is targeted
This is the eleventh list-item
This is the twelfth list-item
This is the thirteenth list-item and is targeted
This is the fourteenth list-item
This is the fifteenth list-item

Border Radius Property: `-moz-border-radius`, `-webkit-border-radius`

p {
  border: 5px solid black;
  padding: 1em;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

This paragraph has rounded corners. Currently, we’re using both -moz-border-radius & -webkit-border-radius, for Firefox and Safari, respectively. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger.

Box Shadow Property: `-moz-box-shadow`, `-webkit-box-shadow`

p {
  background-color: #ffc;
  padding: 1em;
  -moz-box-shadow: 3px 5px 15px #888;
  -webkit-box-shadow: 3px 5px 15px #888;
}

This paragraph has a box-shadow. Currently, we’re using both -moz-box-shadow & -webkit-box-shadow, for Firefox and Safari, respectively.

Text Shadow Property: `text-shadow`

p {
  color: white;
  font-size: 2.5em;
  font-weight: bold;
  text-shadow: 2px 2px 6px #333;
}

The content inside of this paragraph has a text-shadow.

Multiple Background Images

#multipleBackgroundImages {
  background-image: url(https://mail.google.com/mail/images/2/5/logo.png),
                    url(https://docs.google.com/images/doclist/logo_docs.gif);
  background-position: top left, bottom right;
  background-repeat: no-repeat;
  border: 1px solid black;
  padding: 0 1em;
}

These three paragraphs are inside of a div that has multiple background images.

Opacity Property: `opacity`

p {
  background-color: yellow;
  border: 10px solid black;
  opacity: .5;
  padding: 1em;
}

This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This paragraph has solid black text and a solid yellow background, but its opacity is reduced to 50%.

RGBa Value: `rgba(x, x, x, x)`

p {
  background-color: rgba(255, 255, 0, .5);
  border: 10px solid black;
  padding: 1em;
}

Minimum/Maximum Height & Minimum/Maximum Width Properties: `min-height`, `max-height`, `min-width`, `max-width`

#minHeight {
  min-height: 100px;
}
#maxHeight {
  max-height: 12px;
  overflow: hidden; /* Without this, the text would break out of the box */
}
#minWidth {
  min-width: 900px;
}
#maxWidth {
  max-width: 700px;
}

This is a paragraph that has a minimum height of 100 pixels.

This is a paragraph that has a maximum height of 12 pixels. It doesn’t matter how much content you put inside of it, it will always be a maximum of 12 pixels high.

This is a paragraph that has a minimum width of 900 pixels. If your browser window is less than 900 pixels wide, you’ll see a horizontal scroll bar.

This is a paragraph that has a maximum width of 700 pixels. It can be any width up to, or including, 700 pixels before it will stop growing.

Column Property: `-moz-column-width` & `-moz-column-gap`, `-webkit-column-width` & `-webkit-column-gap`

#columnProperty {
  -moz-column-gap: 2em;
  -moz-column-width: 10em;
  -webkit-column-gap: 2em;
  -webkit-column-width: 10em;
}

These six paragraphs are inside of a single div that has column properties applied to it. Look closely, there is no floating or positioning going on here.

Resize Property: `resize`

p {
  border: 1px solid black;
  overflow: auto; /* This is necessary, but shouldn't be */
  padding: 1em;
  resize: both;
  width: 325px;
}

This paragraph can be resized both horizontally and vertically. It looks like a text input field, but it’s not.

Text Overflow Property: `text-overflow`, `-o-text-overflow`

p {
  border: 1px solid black;
  overflow: hidden;
  padding: 1em;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}

If you resize your browser window, you’ll see that the content in this paragraph will not wrap to a second line, and when it reaches the right edge, the last four visible characters will be replaced by a horizontal ellipsis.

Transition Property: `-webkit-transition`, `-webkit-transform`, `-moz-transform`

p {
	border: 1px solid black;
	float: left;
	margin-right: 2em;
	padding: 1em;
	text-align: center;
	width: 100px;
	-webkit-transition: all 1s ease-in-out;
}
.scale:hover {
	-moz-transform: scale(2);
	-webkit-transform: scale(2);
}
.slideLeft:hover {
	-moz-transform: translate(-3em,1em);
	-webkit-transform: translate(-3em,1em);
}
.slideRight:hover {
	-moz-transform: translate(3em,0);
	-webkit-transform: translate(3em,0);
}
.rotate:hover {
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
}

Example 1

Example 2

Example 3

Example 4

An Introduction to CSS 2.1 and CSS 3

Child Selector: >

Adjacent Sibling Selector: +

General Sibling Selector: ~

Attribute Selector: [name=value]

First Child Pseudo-class: :first-child

Last Child Pseudo-class: :last-child

First Letter Pseudo-element: :first-letter

First Line Pseudo-element: :first-line

Enabled, Disabled, and Checked Pseudo-classes: :enabled, :disabled, :checked

nth of Type Pseudo-class: :nth-of-type(3n+1)

Border Radius Property: -moz-border-radius, -webkit-border-radius

Box Shadow Property: -moz-box-shadow, -webkit-box-shadow

Text Shadow Property: text-shadow