11- Learn CSS Fundamentals / Combinators

IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Combinators

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CHILD
Combinators
SIBLING
Combinators
DESCENDANT
Combinator

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.

header
.promo
.promo
header .promo
.div
.promo

HTML CSS
Browser
<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

CHILD
Combinator
SIBLING
Combinators
DESCENDANT
Combinators

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.

CHILD COMBINATOR
header
.promo
.promo
header > .promo
.div
.promo
>
.promo
>

CHILD COMBINATOR
header > .promo
!
>
>
header
"
.promo
"
.promo div
!
"
.promo
>

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
READY TO USE CODE

CHILD
Combinators
SIBLING
Combinator
DESCENDANT
Combinators

Sibling  
combinators
General
Adjacent

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.

h2
h2 ~ p
p
div
p
p

h2 ~ p
~
"
h2
"
p div
!
"
p
~
"
p
~

HTML CSS
Browser
<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.


Limited time oﬀer.
READY TO USE CODE

Sibling  
combinators
General

Adjacent

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.

h2
h2 + p
p
.div
p
p

h2 + p
+
"
h2
"
p div
!
"
p
"
p

HTML CSS
Browser
<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

Enjoy weekly deals.
READY TO USE CODE

HTML CSS
Browser
<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

CHILD
Combinator
SIBLING
Combinator
DESCENDANT
Combinator

AVOID EXTRA SELECTORS
body #container .myclass ul li {....} .someclass li {...}

inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES

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.
inarocket.com

11- Learn CSS Fundamentals / Combinators

More Related Content

What's hot

Similar to 11- Learn CSS Fundamentals / Combinators

More from In a Rocket

Recently uploaded

11- Learn CSS Fundamentals / Combinators