We left off with the questions:
- What if we want certain div elements to have a different background colour or border?
- What if we only want one of our p elements to have a font size of 12px?
The answer to those two questions is selectors. A selector is basically how we determine which element the styles will be applied.
1. Universal
[*
]: Selects all elements.
* {
color: red;
}
2. Element
[selector
]: Selects all elements that matches the name.
div {
background-color: red;
}
h1 {
color: blue;
}
3. Id
[#id
]: Selects the element whose id matches the selector. The selector starts with a pound symbol (#
) followed by the element's id.
<h1 id="special-heading">Heading 1</h1>
#special-heading {
color: red;
}
4. Class
[.class
]: Selects all elements whose class attribute matches the selector. The element can have more than one class. The selector starts with a period (.
) followed by one of the element's classes.
<h1 class="red bold">Red and Bold</h1>
<h1 class="blue bold">Blue and Bold</h1>
<h1 class="bold">Bold</h1>
<h1 class="blue">Blue</h1>
.red {
color: red;
}
.blue {
color: blue;
}
.bold {
font-weight: bold;
}
5. Attribute
[[attr=value]
]: Selects the elements whose attribute-value pair matches the selector.
<input type="email" name="email" />
<input type="submit" />
[name="email"] {
background: blue;
}
[type="submit"] {
background: red;
}
6. Descendant
[selector selector
]: The descendant selector is used when you want apply styling to descendants of an element.
<div class="container">
<div class="container-footer">
<h2>Heading 2</h2>
<div>
<p>Paragraph</p>
</div>
</div>
</div>
<div class="container-2">
<div class="container-footer">
<h2>Heading 2</h2>
<div>
<p>Paragraph</p>
</div>
</div>
</div>
.container h2 {
color: blue;
}
.container p {
color: red;
}
div .container-footer p {
font-size: 8px;
}
7. Direct Descendant
[selector > selector
]: The direct descendant selector is similar to the regular descendant except styling is only applied to direct descendants.
<section>
<p>Paragraph</p>
<div>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div>
<p>Paragraph 4</p>
</div>
</div>
</section>
section > p {
color: blue;
}
section > div > p {
color: red;
}
8. Sibling
[selector ~ selector
]: Sibling selectors applies the styling to sibling elements that matches the selector following the previous selector.
<h1>Heading 1</h1>
<p class="red">Paragraph 1</p>
<p>Paragraph 2</p>
<h1 class="red">Heading 2</h1>
<p>Paragraph 3</p>
<span class="red">Span 1</span>
p ~ .red {
color: red;
}
h1 ~ .red ~ p {
color: pink;
}
9. Adjacent Sibling
[selector + selector
]: Direct Sibling selectors are similar to the sibling selector but it only applies the style to the next sibling element if it matches the selector.
<h1>Heading 1</h1>
<p class="red">Paragraph 1</p>
<p>Paragraph 2</p>
<h1 class="red">Heading 2</h1>
<p>Paragraph 3</p>
<span class="red">Span 1</span>
h1 + .red {
color: red;
}
h1 + .red + span {
color: pink;
}
10. Multiple Selectors
[selector, selector
]: Combine selectors.
#special-heading,
.red,
h1 ~ div > p,
ul > li > p + span {
color: red;
}
Now that we know more about the basic selectors, we'll talk about the box model in the next post.
Top comments (1)
Siguiendote a hora. Muy útil. gracias.