11- Learn CSS Fundamentals / Combinators
1 like107 views
The document discusses CSS fundamentals, focusing on combinators such as descendant, child, and sibling combinators, crucial for selecting elements based on their relationships in the document structure. It includes examples of syntax and application, providing practical code snippets for various scenarios in HTML and CSS. The course promotes efficient learning for front-end development with a hands-on approach and clear instructions.
11- Learn CSS Fundamentals / Combinators
- 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