SPACEBAR to move forward through slides.
SHIFT & SPACEBAR to move backwards through slides.
LEFT ARROW & RIGHT ARROW to move through sections.
ESC to see overview and ESC again to exit.
F to enter presentation mode and ESC to exit.
Combinators allow you to combine individual selectors into new types of selectors.
Descendant combinators are written using two or more selectors separated by whitespace.
/* syntax */
E F { }
/* example */
ul li a { }
Descendant combinators target only elements that are descendants of other elements.
In the following example, the <a> that is a descendant of the <p> will be selected, but not the <a> that is a descendant of the <div>.
/* CSS selector */
p a { }
<!-- HTML markup -->
<p>
<a></a>
</p>
<div>
<a></a>
</div>
The key to descendant combinators is understanding paths to elements. There is a path to every element starting with the <html> element.
Paths can be written in full or in part to the element or a partial path, depending on your need.
/* example paths */
html body .container .nav ul li a { }
body .container .nav ul li a { }
.container .nav ul li a { }
.nav ul li a { }
ul li a { }
ul a { }
li a { }
a { }
When writing descendant combinators, try to keep your selectors as short as possible. Each selector should only be as specific as needed.
/* unnecessarily long */
.nav ul li a { }
/* only as specific as needed */
.nav a { }
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
CSS Level 2 (Revision 1)
Status: Recommendation
Descendant combinators are well supported across all modern browsers.
Open this HTML file in an editor:
exercises-start/exercise-205-02-01.html
Write a CSS rule to style the <a> element to be color: firebrick.
However, only style the <a> element inside the <p> element (Link 2), not the <a> element inside the <div> element (Link 1).
<div>
<a href="#">Link 1</a>
</div>
<p>
<a href="#">Link 2</a>
</p>
/* Add styles here */
p a {
color: firebrick;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-02-01.html
Child combinators are written using two selectors separated by a ">".
/* syntax */
E > F { }
/* example */
p > a { }
Whitespace within the selector is optional.
/* Valid */
p > a { }
p>a { }
Child combinators target any element that is a direct child of another element.
Only child elements, rather than descendant elements, will be selected.
In the following example, the <a> that is a child of the <div> will be selected, but not the <a> that is a descendant of the <div>.
/* CSS Selector */
div > a { }
<!-- HTML markup -->
<div>
<a></a>
</div>
<div>
<p> <a></a> </p>
</div>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
CSS Level 2 (Revision 1)
Status: Recommendation
Child combinators are not supported by Internet Explorer 6.
Open this HTML file in an editor:
exercises-start/exercise-205-02-02.html
Write a CSS rule to style the <a> element to be color: forestgreen.
However, only style the <a> that is a child of the <div> element (Link 1), not the <a> that is a descendant of the <div> element (Link 2).
<div>
<a href="#">Link 1</a>
</div>
<div>
<p>
<a href="#">Link 2</a>
</p>
</div>
/* Add styles here */
div > a {
color: forestgreen;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-02-01.html
Adjacent sibling combinators are written using two selectors separated by a "+".
/* syntax */
E + F { }
/* example */
h2 + h3 { }
Whitespace within the selector is optional.
/* Valid */
h2 + h3 { }
h2+h3 { }
Adjacent sibling combinators target the sibling immediately following a defined element.
In the following example, only the <h3> that is adjacent to (or comes directly after) the <h2> will be selected.
/* CSS selector */
h2 + h3 { }
<!-- HTML markup -->
<h2>Content</h2>
<h3>Content</h3>
<h3>Content</h3>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
CSS Level 2 (Revision 1)
Status: Recommendation
Adjacent sibling combinators are not supported by Internet Explorer 6.
Open this HTML file in an editor:
exercises-start/exercise-205-02-03.html
Write a CSS rule to style the <h3> element to be color: hotpink.
However, only style the <h3> that comes directly after the <h2> element.
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h3>Heading level 3</h3>
/* Add styles here */
h2 + h3 {
color: hotpink;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-02-03.html
General sibling combinators are written using two selectors separated by a "~".
/* syntax */
E ~ F { }
/* example */
h2 ~ h3 { }
Whitespace within the selector is optional.
/* Valid */
h2 ~ h3 { }
h2~h3 { }
General sibling combinators target any sibling that follows a defined element.
In the following example, any <h3> that appears after the <h2> in source order will be selected - as long as they share the same parent.
/* CSS selector */
h2 ~ h3 { }
<!-- HTML markup -->
<h2>Content</h2>
<h3>Content</h3>
<h3>Content</h3>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
General sibling combinators are not supported by Internet Explorer 6.
Open this HTML file in an editor:
exercises-start/exercise-205-02-04.html
Write a CSS rule to style the <h3> element to be color: lawngreen.
However, only style all <h3> elements that come after the <h2> element, rather than those that come before.
<h3>Heading level 3</h3>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h3>Heading level 3</h3>
/* Add styles here */
h2 ~ h3 {
color: lawngreen;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-02-04.html
Site Twitter Github Slideshare Linkedin