Learn CSS3: Selectors

1. inarocket.com Learn at rocket speed CSSSELECTORS

2. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com

3. What is a CSS selector

4. inarocket.com - CSS / Selectors WHAT IS A CSS SELECTOR With this code all paragraphs are shown in blue. Don’t worry about the declaration. We will learn how to use it later. A CSS selector allows you to select the content you want to style. p {color: blue} Property Selector Declaration Value

5. Basic selectors

6. inarocket.com - CSS / Selectors UNIVERSAL SELECTOR All the elements are shown in blue A CSS universal selector allows you to select and style any element type. * {color: blue} Syntax * {style properties}

7. inarocket.com - CSS / Selectors UNIVERSAL SELECTOR <h1>CSS rocks!</h1> Hello world. <ul> <li>First item</li> <li>Second item</li> </ul> HTML CSS * {color: blue} Browser CSS rocks! Hello world. • First item • Second item index.html

8. inarocket.com - CSS / Selectors ELEMENT SELECTOR With this code all paragraphs are shown in blue A CSS element selector allows you to select and style a HTML element. p {color: blue} Syntax element {style properties}

9. inarocket.com - CSS / Selectors ELEMENT SELECTOR CSS rocks! Hello world. HTML CSS p {color: blue} Browser CSS rocks! Hello world. index.html

10. inarocket.com - CSS / Selectors ID SELECTOR Only the element with the “nav” id is shown in blue A CSS id selector allows you to select and style the element with the speciﬁed id. #nav {color: blue} Syntax #id_value {style properties}

11. inarocket.com - CSS / Selectors ID SELECTOR CSS rocks! Hello world. HTML CSS #nav {color: blue} Browser CSS rocks! Hello world. index.html

12. inarocket.com - CSS / Selectors CLASS SELECTOR Only the elements with the “ready” class are shown in blue A CSS class selector allows you to select and style the elements with the speciﬁed class. .ready {color: blue} Syntax .classname {style properties}

13. inarocket.com - CSS / Selectors CLASS SELECTOR <div class=“ready”>CSS rocks!</div> Hello world. More content. HTML CSS .ready {color: blue} Browser CSS rocks! Hello world. More content. index.html

14. inarocket.com - CSS / Selectors ELEMENT SPECIFIC SELECTOR Only the paragraphs with the “ready” class are shown in blue A CSS element speciﬁc selector allows you to select and style only the elements associated with a speciﬁc class/id. p.ready {color: blue} Syntax element.classname {style properties}

15. inarocket.com - CSS / Selectors ELEMENT SPECIFIC SELECTOR CSS rocks! <div class=“ready”>Hello world.</div> More content. HTML CSS p.ready {color: blue} Browser CSS rocks! Hello world. More content. index.html

16. Relational selectors

17. inarocket.com - CSS / Selectors DESCENDANT SELECTOR All the paragraphs that are descendant of a div element are shown in blue A CSS descendent selector allows you to select and style all elements that are descendants of a speciﬁed element. div p {color: blue} Syntax selector1 selector2 {style properties}

18. inarocket.com - CSS / Selectors DESCENDANT SELECTOR <div> CSS rocks! </div> Hello world. HTML CSS div p {color: blue} Browser CSS rocks! Hello world. index.html

19. inarocket.com - CSS / Selectors CHILD SELECTOR Only the strong elements that are direct descendants of a paragraph are shown in blue A CSS child selector allows you to select and style only the elements that are direct descendants. p>strong {color: blue} Syntax selector1 > selector2 {style properties}

20. inarocket.com - CSS / Selectors CHILD SELECTOR CSS rocks! <a href=“#”>Hello world.</a> HTML CSS p>strong {color: blue} Browser CSS rocks! Hello world. index.html

21. inarocket.com - CSS / Selectors ADJACENT SIBLING SELECTOR Only the paragraphs that immediately follows a h1 are shown in blue. A CSS adjacent sibling selector allows you to select and style the element that is an immediate sibling. h1+p {color: blue} Syntax former_element + target_element {style properties}

22. inarocket.com - CSS / Selectors ADJACENT SIBLING SELECTOR CSS rocks! <h1>Hello world.</h1> More content. More content. HTML CSS h1+p {color: blue} Browser CSS rocks! Hello world. More content. More content. index.html

23. inarocket.com - CSS / Selectors GENERAL SIBLING SELECTOR Only the paragraphs that are siblings of a h1 are shown in blue A CSS general sibling selector allows you to select and style the elements that are siblings of a given element. h1~p {color: blue} Syntax element ~ element {style properties}

24. inarocket.com - CSS / Selectors GENERAL SIBLING SELECTOR CSS rocks! <h1>Hello world.</h1> More content. More content. HTML CSS h1~p {color: blue} Browser CSS rocks! Hello world. More content. More content. index.html

25. Attribute selectors

26. inarocket.com - CSS / Selectors ATTRIBUTE SELECTOR A CSS attribute selector allows you to select and style an element with a speciﬁc attribute or attribute value. p[lang] {color: blue} Syntax element[attr] {style properties} Only the paragraphs with the lang attribute are shown in blue.

27. inarocket.com - CSS / Selectors ATTRIBUTE SELECTOR CSS rocks! More content. <a href=“#” target=“_blank”>Contact</a> <a href=“#”>About us</a> HTML CSS p[lang] {color: blue} a[target] {color: red} Browser CSS rocks! More content. Contact About us index.html The a element is shown in blue by default

28. inarocket.com - CSS / Selectors ATTRIBUTE SELECTOR CSS rocks! Bonjour! <a href=“contact.html”>Contact</a> <a href=“#”>About us</a> HTML CSS p[lang=“en”] {color: blue} a[href=“contact.html”] {color: red} Browser CSS rocks! Bonjour! Contact About us index.html The a element is shown in blue by default

29. inarocket.com - CSS / Selectors ATTRIBUTE SELECTOR CSS rocks! HTML CSS p[lang~="en-us"] {color: blue} Browser CSS rocks! index.html

30. inarocket.com - CSS / Selectors ATTRIBUTE SELECTOR CSS rocks! Hello world. More content. HTML CSS p[lang="en"] {color: blue} Browser CSS rocks! Hello world. More content. index.html

31. Pseudo-classes

32. inarocket.com - CSS / Selectors PSEUDO-CLASS SELECTOR Links are shown in blue when their state is hover (mouse over them) A CSS pseudo-class selector allows you to select and style an element with a special state speciﬁed by a keyword. a:hover {color: blue} Syntax selector:pseudo-class {style properties}

33. inarocket.com - CSS / Selectors PSEUDO-CLASS SELECTOR <a href=“#”>Contact</a> HTML CSS a:hover {color: red} Browser Contact index.html The mouse is over a link but not clicking it

34. Structural pseudo-classes

35. inarocket.com - CSS / Selectors NTH-CHILD SELECTOR Only odd paragraphs are shown in blue A CSS nth-child selector allows you to select and style an element that has an+b-1 siblings before it in the document tree and has a parent element. p:nth-child(2n+1) {color: blue} Syntax element:nth-child(an + b) {style properties}

36. inarocket.com - CSS / Selectors NTH-CHILD SELECTOR Paragraph one Paragraph two Paragraph three Paragraph four HTML CSS p:nth-child(2n+1) {color: blue} Browser Paragraph one Paragraph two Paragraph three Paragraph four index.html

37. inarocket.com - CSS / Selectors NTH-CHILD SELECTOR Paragraph one Paragraph two Paragraph three Paragraph four HTML CSS p:nth-child(2n) {color: blue} Browser Paragraph one Paragraph two Paragraph three Paragraph four index.html

38. inarocket.com - CSS / Selectors NTH-CHILD SELECTOR Paragraph one Paragraph two Paragraph three Paragraph four HTML CSS p:nth-child(3) {color: blue} Browser Paragraph one Paragraph two Paragraph three Paragraph four index.html

39. inarocket.com - CSS / Selectors NOTICE Sorry for the inconvenience. This presentation is a work in progress.

40. Are you also interested in learning BOOTSTRAP 4 POSTCSS? + http://inarocket.teachable.com/courses/css-postcss Please visit:

41. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com

42. inarocket.com Learn at rocket speed CSSSELECTORS

Learn CSS3: Selectors

In a Rocket

Learn CSS3: Selectors