Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Learn CSS3: Selectors

1,496 views

Published on

http://inarocket.com

Learn CSS3 fundamentals as fast as possible. CSS syntax, why use CSS, inline / embeded / external styles, measurements, selectors (universal, element, id, class, descendent, child, sibbling, attribute, pseudo-class, nth-child), inheritance, gradients, shadows, rounded corners, browser support, etc.

Published in: Internet
  • Be the first to comment

Learn CSS3: Selectors

  1. 1. inarocket.com Learn at rocket speed CSSSELECTORS
  2. 2. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com
  3. 3. What is a CSS selector
  4. 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. 5. Basic selectors
  6. 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. 7. inarocket.com - CSS / Selectors UNIVERSAL SELECTOR <h1>CSS rocks!</h1> <p>Hello world.</p> <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. 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. 9. inarocket.com - CSS / Selectors ELEMENT SELECTOR <p>CSS rocks!</p> <p>Hello world.</p> HTML CSS p {color: blue} Browser CSS rocks! Hello world. index.html
  10. 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 specified id. #nav {color: blue} Syntax #id_value {style properties}
  11. 11. inarocket.com - CSS / Selectors ID SELECTOR <p id=“nav”>CSS rocks!</p> <p>Hello world.</p> HTML CSS #nav {color: blue} Browser CSS rocks! Hello world. index.html
  12. 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 specified class. .ready {color: blue} Syntax .classname {style properties}
  13. 13. inarocket.com - CSS / Selectors CLASS SELECTOR <div class=“ready”>CSS rocks!</div> <p> <strong class=“ready”>Hello world.</strong> </p> <p class=“ready”>More content.</p> HTML CSS .ready {color: blue} Browser CSS rocks! Hello world. More content. index.html
  14. 14. inarocket.com - CSS / Selectors ELEMENT SPECIFIC SELECTOR Only the paragraphs with the “ready” class are shown in blue A CSS element specific selector allows you to select and style only the elements associated with a specific class/id. p.ready {color: blue} Syntax element.classname {style properties}
  15. 15. inarocket.com - CSS / Selectors ELEMENT SPECIFIC SELECTOR <p class=“ready”>CSS rocks!</p> <div class=“ready”>Hello world.</div> <p> <strong class=“ready”>More content.</strong> </p> HTML CSS p.ready {color: blue} Browser CSS rocks! Hello world. More content. index.html
  16. 16. Relational selectors
  17. 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 specified element. div p {color: blue} Syntax selector1 selector2 {style properties}
  18. 18. inarocket.com - CSS / Selectors DESCENDANT SELECTOR <div> <p>CSS rocks!</p> </div> <p>Hello world.</p> HTML CSS div p {color: blue} Browser CSS rocks! Hello world. index.html
  19. 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. 20. inarocket.com - CSS / Selectors CHILD SELECTOR <p><strong>CSS rocks!</strong></p> <p> <a href=“#”><strong>Hello world.</strong></a> </p> HTML CSS p>strong {color: blue} Browser CSS rocks! Hello world. index.html
  21. 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. 22. inarocket.com - CSS / Selectors ADJACENT SIBLING SELECTOR <p>CSS rocks!</p> <h1>Hello world.</h1> <p>More content.</p> <p>More content.</p> HTML CSS h1+p {color: blue} Browser CSS rocks! Hello world. More content. More content. index.html
  23. 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. 24. inarocket.com - CSS / Selectors GENERAL SIBLING SELECTOR <p>CSS rocks!</p> <h1>Hello world.</h1> <p>More content.</p> <p>More content.</p> HTML CSS h1~p {color: blue} Browser CSS rocks! Hello world. More content. More content. index.html
  25. 25. Attribute selectors
  26. 26. inarocket.com - CSS / Selectors ATTRIBUTE SELECTOR A CSS attribute selector allows you to select and style an element with a specific 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. 27. inarocket.com - CSS / Selectors ATTRIBUTE SELECTOR <p lang=“en”>CSS rocks!</p> <p>More content.</p> <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. 28. inarocket.com - CSS / Selectors ATTRIBUTE SELECTOR <p lang=“en”>CSS rocks!</p> <p lang=“fr”>Bonjour!</p> <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. 29. inarocket.com - CSS / Selectors ATTRIBUTE SELECTOR <p lang=“en-gb en-us en-au en-nz”>CSS rocks!</p> HTML CSS p[lang~="en-us"] {color: blue} Browser CSS rocks! index.html
  30. 30. inarocket.com - CSS / Selectors ATTRIBUTE SELECTOR <p lang=“en-gb”>CSS rocks!</p> <p lang=“en-us”>Hello world.</p> <p lang=“en-au”>More content.</p> HTML CSS p[lang="en"] {color: blue} Browser CSS rocks! Hello world. More content. index.html
  31. 31. Pseudo-classes
  32. 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 specified by a keyword. a:hover {color: blue} Syntax selector:pseudo-class {style properties}
  33. 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. 34. Structural pseudo-classes
  35. 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. 36. inarocket.com - CSS / Selectors NTH-CHILD SELECTOR <p>Paragraph one</p> <p>Paragraph two</p> <p>Paragraph three</p> <p>Paragraph four</p> HTML CSS p:nth-child(2n+1) {color: blue} Browser Paragraph one Paragraph two Paragraph three Paragraph four index.html
  37. 37. inarocket.com - CSS / Selectors NTH-CHILD SELECTOR <p>Paragraph one</p> <p>Paragraph two</p> <p>Paragraph three</p> <p>Paragraph four</p> HTML CSS p:nth-child(2n) {color: blue} Browser Paragraph one Paragraph two Paragraph three Paragraph four index.html
  38. 38. inarocket.com - CSS / Selectors NTH-CHILD SELECTOR <p>Paragraph one</p> <p>Paragraph two</p> <p>Paragraph three</p> <p>Paragraph four</p> HTML CSS p:nth-child(3) {color: blue} Browser Paragraph one Paragraph two Paragraph three Paragraph four index.html
  39. 39. inarocket.com - CSS / Selectors NOTICE Sorry for the inconvenience. This presentation is a work in progress.
  40. 40. Are you also interested in learning BOOTSTRAP 4 POSTCSS? + http://inarocket.teachable.com/courses/css-postcss Please visit:
  41. 41. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com
  42. 42. inarocket.com Learn at rocket speed CSSSELECTORS

×