css selector

basic selector

tag selector

html pages tags.

  # html
  <h1>HEADER</h1>
  # css
  h1 { color: red; font-size: 25px; }

class selector

In html we can put tags into differet class, like

  # html
  <p class="red">class selector 1</p>
  <p class="green">class selector 2</p>
  # css
  .red { color: red; }
  .green { color: green; }

ID selector

It’s almost same with class selector. The difference is that ID selector can only be used once in a single html pages (class selector can be used more than once).
```
  # html
  <p id="one">ID selector 1</p>
  <p id="two">ID selector 2</p>
  # css
  #one { font-weight: bold; }
  #two { font-size: 30px; }
```

complex selector

Mix up the three basic seletor, we can get more powerful and more accurate selection.

intersection selector

Mix up two basic selector and get their intersection. The first must be tag selector and the second can be class selector or ID selector. Space is not allowed between the two selectors.
```
  h1, h2, h3, h4, h5, p { color: purple; font-size: 15px; }
  h2.special { text-decoration: underline; }
```

child selector

  # html
  <body>
      <p>Nested<span>SPAN</span>is here.</p>
      <span>Outer span</span>is there.
  </body>    
  # css
  p span { color: red; }
  span { color: blue; }

Published at 30 November 2012

Tags css 3

css selector css selector

basic selector

complex selector