CSS Cross Country Course - Level 8

Notes from Codeschool CSS Cross Country Course - Level 8

Pseudo Classes

With pseudo classes you can conditionally target elements based on their position or their current state.
Common pseudo classes include :hover and :focus, among others.

In this case we want each line item to have a line beneath it, except the last item on the list.
You can use a pseudo class, last-child to get the desired effect:

<!-- index.html -->
<ul>
  <li><a href="#lodging">Lodging</a></li>
  <li><a href="#rentals">Rentals</a></li>
  <li><a href="#lessos">Lessons</a></li>
</ul>

/* styles.css */
li {
  border-bottom: 1px solid #aaa;
}

li:last-child {
  border-bottom: 0;
}

This will target the last item in the parent container, in this case <ul> is the parent container and the <li>s are the children.

Simplifying With Nth-child Pseudo Class

Zebra Striping

You can use nth-child pseudo class to achieve a zebra strip effect.

adding zebra striping to a list

You can also target odd items by switching (even) for (odd).

li:nth-child(odd) {
  background-color: #444245;
}

Use the following the match items in intervals of a starting with element at position b (or 0 if b isn't set).

li:nth-child(an + b)

For example:

li:nth-child(2n) {  /* replicates even */

li:nth-child(2n + 1)  { /* replicates odd */

li:nth-child(3n) {  /* selects every 3rd item */

li:nth-child(4n + 4) { /* selects every 4th item starting at 4 */

Some Useful Pseudo Classes

For links:
:hover / :focus / :active / :visited

:first-child / :last-child / :only-child

:nth-child / :nth-of-type  

nth-of-type allows you to select siblings of a certain type within a matched list.

Pseudo Elements

In this example you want to end each paragraph with a snowflake UTF character.

<!-- index.html -->
<article>
  <p>Coffee? Hah! Our cocoa is much better.</p>
  <p>Visit from 4-5pm for cocoa happy hour!#x2744;</p>
</article>

One way to accomplish this is to add the UTF character at the end of each article. This becomes a lot of work to maintain and difficult to change or remove later.

Instead using the :last-child pseudo element, you can select the last paragraph in CSS, then apply the :after pseudo element. We also used the escape text value for snowflake and the content property.

/* styles.css */
article p:last-child:after {
  content: '/2744';
}

More Pseudo Elements

:before / :after
- require content property, whether or not being used
- only supported IE8+

:first-letter / :first-line
- allows you to target the first letter or the first line of content.
- does not need content property to be used

Example(bad one):

<!-- index.html -->
<blockquote>
  Coffee? Hah! Our cocoa is far better!
  <span></span>
</blockquote>

/* styles.css */
blockqoute span {
  background: url(quote.png);
  display: block;
  height: 30px;
  width: 30px;
  position: absolute;
  top: -5px;
  left: -5px;
}

This example achieves the desired effect, but is not ideal because it uses an empty <span>, which is not very D.R.Y.

Instead use a :before pseudo element. It uses the same properties, with the addition of the content property, which is required for use with :before.

/* styles.css */
/* good example */
blockqoute:before {
  content: '';
  background: url(quote.png);
  display: block;
  height: 30px;
  width: 30px;
  position: absolute;
  top: -5px;
  left: -5px;
}

To learn more about pseudo elements, read: http://css-tricks.com/pseudo-class-selectors/ and http://css-tricks.com/pseudo-element-roundup/