Css/Training/Selectors
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!