View source for Css/Training/Selectors

<div style='float: right;background: white;border:1px dashed black;padding: 1ex;margin-left: 1ex;'>

* [[css/Training|CSS Educational Materials]]
** [[css/Training#Week_1|Week 1]]
*** [[css/Training#Introduction_to_CSS|Introduction to CSS]]
**** [[css/Training/What_is_CSS|What is CSS]]
**** [[css/Training/Syntax|Syntax]]
**** [[css/Training/Selectors|Selectors]]
**** [[css/Training/Create_CSS|Create CSS]]

</div>

= 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]
<pre>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</pre>

[style.css]
<pre>
p{
  color: red;
  font-size: 12px;
}
</pre>


=== 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]
  &lt;p '''class="red"'''&gt;This is a paragraph&lt;/p&gt;
  &lt;p '''class="blue"'''&gt;This is a paragraph&lt;/p&gt;
  &lt;p '''class="red"'''&gt;This is a paragraph&lt;/p&gt;
  &lt;p '''class="blue"'''&gt;This is a paragraph&lt;/p&gt;

[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]
  &lt;p class="red"&gt;This is a paragraph&lt;/p&gt;
  &lt;p class="blue"&gt;This is a paragraph&lt;/p&gt;
  &lt;p class="red" '''id="small"'''&gt;This is a paragraph&lt;/p&gt;

[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]
  &lt;h1&gt;This is a &lt;em&gt;header&lt;/em&gt;&lt;/h1&gt;
  &lt;p&gt;This is a &lt;em&gt;paragraph&lt;/em&gt;&lt;/p&gt;

[style.css]
  h1 em{
    color: red;
    font-size: 12px;
  }


The selector introduces here is not all.<br />
See also [http://www.w3.org/TR/css3-selectors/ 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]
<pre>
  <h1>This is a heading</h1>
  <h2>This is a heading</h2>
  <h3>This is a heading</h3>
  <h4>This is a heading</h4>
</pre>

[style.css]
  '''h1, h2, h3, h4'''{
    color: red;
    font-size: 12px;
  }


''Let's try to [[Css/Training/Create_CSS|creating CSS]]!''