selectors.md

Working with CSS selectors

See week 1's lecture for review.

Outcomes

• Know the different types of css selectors
• Know when to use each type

5 Basic ways to select an element:

Because we are now wirting modular CSS, we are not going to write our global CSS inline or in the header. Instead, we all agree to link to external stylesheets.

Method 1: HTML element selctor

Select an element based on its element.

input {
  border-radius: 2px;
}

Method 2: Class selector

Apply a style to any element with the same class

.button {
  display: inline-block;
  padding: 15px 20px;
  border-radius: 2px;
}

Method 3: ID selector

Because of CSS specifivity issues, using IDs to apply styles isn't ideal. See #.

#post-23 {
  border-color: red;
}

Method 4: Nested selectors

header nav {
  position: fixed;
}

Method 5: Chained selectors

You can also apply styles when ALL the classes or IDs in the selecting statement are present.

/* select #header only when it has the class: .navigation */
#header.navigation {
  position: fixed;
}

/* select an element that has BOTH .button AND .buttonTiny */
.button.buttonTiny {
  position: fixed;
}

Nifty CSS selectors

http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048