In this lecture, we will discuss…

Element, class,
& id Selectors
 Element Selector
Element  name  

p {
color: blue;
}
 Element Selector

Blue  text  

...
p { <p>...</p>
color: blue; ...
} <p>...</p>

Blue  text  
 class Selector
Class  name  

.blue {
color: blue;
}
 class Selector

Blue  text  
...
...
.blue { <p class="blue">...</p>
color: blue; <p>...</p>
} <div class="blue">...</div>
...

Blue  text  
Unaffected  
 class Selector
Defined  with  .   Used  without  
Blue  text  
...
...
.blue { <p class="blue">...</p>
color: blue; <p>...</p>
} <div class="blue">...</div>
...

Blue  text  
Unaffected  
 id Selector
id  Value  

#name {
color: blue;
}
 id Selector

Unaffected  

...
#name { <p>...</p>
color: blue; <div id="name">...</div>
} ...

Blue  text  
 id Selector
Defined  with  #  
Unaffected  

...
#name { <p>...</p>
color: blue; <div id="name">...</div>
} ...

Used  without   Blue  text  

 Grouping Selectors
Separate  selectors    
with  commas   Blue  text  
...
...
div, .blue { <p class="blue">...</p>
color: blue; <p>...</p>
} <div>...</div>
...

Blue  text  
 Summary
²  Syntax simple CSS selectors
•  Element
•  class (define with .)
•  id (define with #)

NEXT:
Combining Selectors