CSS/Training/Selectors

From W3C Wiki
< CSS‎ | Training
Jump to: navigation, search

Selectors

Selectors are specify the target of styling. Selectors may range from simple element names to rich contextual representations.

Kind of selector

Type selector

A type selector is the name of HTML Tag.

[index.html]

<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>

[style.css]

p{
  color: red;
  font-size: 12px;
}


Class selector

Class selector is used for one or more elements. It is described the value of class attribute of HTML document with ".(period)".

[index.html]

 <p class="red">This is a paragraph</p>
 <p class="blue">This is a paragraph</p>
 <p class="red">This is a paragraph</p>
 <p class="blue">This is a paragraph</p>

[style.css]

 p{
   font-size: 12px;
 }
 .red{
   color: red;
 }
 .blue{
   color: blue;
 }


ID selector

ID selector is used for unique element. It is described the value of ID attribute of HTML document with "#".

[index.html]

 <p class="red">This is a paragraph</p>
 <p class="blue">This is a paragraph</p>
 <p class="red" id="small">This is a paragraph</p>

[style.css]

 p{
   font-size: 12px;
 }
 .red{
   color: red;
 }
 .blue{
   color: blue;
 }
 #small{
   font-size: 9px;
 }


Descendant combinator

A descendant combinator is whitespace that separates two sequences of simple selectors. A selector of the form "A B" represents an element B that is an arbitrary descendant of some ancestor element A.

[index.html]

 <h1>This is a <em>header</em></h1>
 <p>This is a <em>paragraph</em></p>

[style.css]

 h1 em{
   color: red;
   font-size: 12px;
 }


The selector introduces here is not all.
See also Selectors Level 3.


Grouping

A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the list.

[index.html]

  <h1>This is a heading</h1>
  <h2>This is a heading</h2>
  <h3>This is a heading</h3>
  <h4>This is a heading</h4>

[style.css]

 h1, h2, h3, h4{
   color: red;
   font-size: 12px;
 }


Let's try to creating CSS!