Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- Different combinator selectors that can be used in CSS.
- How to use descendant, child and siblings combinators.
READY-TO-USE CODE:
https://inarocket.com/courses/css/css-fundamentals/combinators.php
BEST BOOKS TO LEARN CSS:
- CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT
- HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i
- CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf
- CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
1. IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Combinators
2. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CHILD
Combinators
SIBLING
Combinators
DESCENDANT
Combinator
3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
DESCENDANT COMBINATOR
Describe an element that is the descendant of another element in the document tree.
header .promo {color: green}
Syntax selectorOutsite selectorInside {style properties}
With this code all elements that have a class promo inside a header element are shown in green.
4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
DESCENDANT COMBINATOR
header
.promo
.promo
header .promo
.div
.promo
5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
DESCENDANT COMBINATOR
<body>
<header>
<h1 class="promo">Join us</h1>
<div>
<p class="promo">Subscribe to our newsletter!</p>
</div>
</header>
<h1 class="promo">Deals</h1>
<p class="promo">Enjoy a 10% discount.</p>
</body>
.promo { font-style: italic; }
header .promo { color: green; }
Web page title
index.html
Join us
Subscribe to our newsletter!
Deals
Enjoy a 10% discount.
READY TO USE CODE
6. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CHILD
Combinator
SIBLING
Combinators
DESCENDANT
Combinators
7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CHILD COMBINATOR
Only targets immediate child elements.
header > .promo {color: green}
Syntax selectorOutsite > selectorInside {style properties}
With this code only the immediate child elements of header
that have a class promo are shown in green.
8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CHILD COMBINATOR
header
.promo
.promo
header > .promo
.div
.promo
>
.promo
>
9. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CHILD COMBINATOR
header > .promo
!
>
>
header
"
.promo
"
.promo div
!
"
.promo
>
10. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
CHILD COMBINATOR
<body>
<header>
<h1 class="promo">Join us</h1>
<div>
<p class="promo">Subscribe to our
newsletter!</p>
</div>
</header>
</body>
.promo { font-style: italic; }
header > .promo { color: green; }
Web page title
index.html
Join us
Subscribe to our newsletter!
READY TO USE CODE
11. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CHILD
Combinators
SIBLING
Combinator
DESCENDANT
Combinators
12. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Sibling
combinators
General
Adjacent
13. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
SIBLING COMBINATOR: GENERAL
Select elements based of sibling relationships.
h2 ~ p {color: green}
Syntax selectorA ~ selectorB {style properties}
With this code only the paragraphs that are siblings of h2 are shown in green.
14. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
SIBLING COMBINATOR: GENERAL
h2
h2 ~ p
p
div
p
p
15. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
SIBLING COMBINATOR: GENERAL
h2 ~ p
~
"
h2
"
p div
!
"
p
~
"
p
~
16. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
SIBLING COMBINATOR: GENERAL
<body>
<h2>Join us</h2>
<p>Enjoy weekly deals.</p>
<div>
<p>Subscribe to our newsletter!</p>
</div>
<p>Limited time offer.</p>
</body>
h2 ~ p { color: green; }
Web page title
index.html
Join us
Enjoy weekly deals.
Subscribe to our newsletter!
Limited time offer.
READY TO USE CODE
17. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Sibling
combinators
General
Adjacent
18. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
SIBLING COMBINATOR: ADJACENT
Select elements that are immediate siblings, not just general.
h2 + p {color: green}
Syntax selectorA + selectorB {style properties}
With this code only the paragraphs that are immediate siblings of h2 are shown in green.
19. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
SIBLING COMBINATOR: ADJACENT
h2
h2 + p
p
.div
p
p
20. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
SIBLING COMBINATOR: ADJACENT
h2 + p
+
"
h2
"
p div
!
"
p
"
p
21. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
SIBLING COMBINATOR: ADJACENT
<body>
<h2>Join us</h2>
<p>Subscribe to our newsletter!</p>
<p>Enjoy weekly deals.</p>
</body>
h2 + p { color: green; }
Web page title
index.html
Join us
Subscribe to our newsletter!
Enjoy weekly deals.
READY TO USE CODE
22. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
SIBLING COMBINATOR: ADJACENT
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
li + li { color: green; }
Web page title
index.html
• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
READY TO USE CODE
23. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CHILD
Combinator
SIBLING
Combinator
DESCENDANT
Combinator
24. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
AVOID EXTRA SELECTORS
body #container .myclass ul li {....} .someclass li {...}
25. Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES
26. We respect your time
No more blah blah videos. Just straight to
the point slides with relevant information.
Ready to use code
Real code you can just copy and paste into
your real projects.
Step by step guides
Clear and concise steps to build real use
solutions. No missed points.
Learn front-end development at rocket speed
inarocket.com
27. IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Combinators