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!