Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Pseudo

CSS Pseudo

Learn practical uses for over 25 pseudo-classes and pseudo-elements with Mike Kivikoski. Starting with the basics, you’ll quickly advance to use cases that apply to positioning, text, content, and get a glimpse at some (hopeful) future selectors. All levels of CSS experience are welcome and encouraged to attend - there is something for everyone!

Codepen collection of examples bit.ly/pseudo-pen

Mike Kivikoski

April 06, 2016
Tweet

More Decks by Mike Kivikoski

Other Decks in Technology

Transcript

  1. Warning These examples are for demo and may not be

    the best use case for your application due to maintainability, performance and specificity.
  2. :link Styles applied on links that a user has not

    visited. a:link{ property: value; }
  3. :visited For privacy reasons, :visited only accepts color, background-color, border-color,

    outline-color, and the color parts of the fill and stroke properties
  4. :focus Styles applied when an element has received focus via

    keyboard or mouse. selector:focus{ property: value; }
  5. :focus & :hover a:focus, a:hover { color: #73E3FC; } <a

    href="#hello">hello< <a href="#folks">folks! <a href="#how">How</a> <a href="#goes">goes?</
  6. :lang(language) Styles applied with match of elements based on the

    
 document language. :lang(language){ property: value; } selector:lang(language){ property: value; }
  7. :lang(language) :lang(en) { color: #E3BB33; } :lang(es) { background: #E3BB33;

    margin: 1em 2em; padding: 1em; } http://codepen.io/mikekivikoski/pen/KzXPJG <div lang="en"> Content with lang= define</div> <div lang="es"> Parece que ya está "ES " definido</di <div lang="en"> more english mumbo div>
  8. ::after div::after { content: "You’re great!"; } <div> Hello there!

    </div> http://codepen.io/mikekivikoski/pen/dMVyPN
  9. ::before li::before { content: "\1F355"; //pizza! } <ul> <li>One</li> <li>Two</li>

    <li>Three</li> </ul> http://codepen.io/mikekivikoski/pen/EKwxyP
  10. ::first-letter Styles are applied to the first letter of 


    the specified selector. selector::first-letter{ property: value; }
  11. ::first-letter p::first-letter{ font-size: 2em; } <p>Bacon ipsum dolor amet shankle

    cupim jowl, pancetta landjaeger beef short ribs spare rib boudin doner filet mignon ball tip corned bee pork belly.</p> http://codepen.io/mikekivikoski/pen/mPBJgw
  12. ::first-line Styles are applied to only the first line of

    an element. selector::first-line{ property: value; }
  13. ::first-line p::first-line{ font-variant: small-caps; } <p>Bacon ipsum dolor amet shankle

    cupim jowl, pancetta landjaeger beef short ribs spare ribs boudin doner filet mignon ball tip corned beef pork belly.</p> http://codepen.io/mikekivikoski/pen/Xdemrr
  14. ::selection Styles are applied to elements that have been highlighted

    with a mouse. selector::selection{ property: value; }
  15. ::selection p::selection{ color: #73E3FC; } <p>Bacon ipsum dolor amet shankle

    cupim jowl, pancetta landjaeger beef short ribs spare ribs boudin doner filet mignon ball tip corned beef pork belly.</p> http://codepen.io/mikekivikoski/pen/eZGvKG
  16. :not(s) Is a negation pseudo class accepting a simple selector

    as an argument. selector:not(s){ property: value; }
  17. :not(s) li:not(:last-child){ color: #E3BB33; } <li>First LI</li> <li>Active LI</li> <li>Third

    LI</li> <li>Last LI</li> http://codepen.io/mikekivikoski/pen/YqrQzN
  18. :not and ::after a:not( [href*='yourdomain.com'] )
 :not( [href^='#'] )
 :not(

    [href^='/'] )
 ::after { content: "\2192"; } <a href="http://anothersite.com"> To another site! </a>
  19. :checked Styles applied to radio, checkbox or option element that

    is checked to an on state. selector:checked{ property: value; }
  20. :checked input:checked + label{ color: #E3BB33; } <input type="checkbox"> <label>:checkbox

    demo label</label> http://codepen.io/mikekivikoski/pen/YqrXvW
  21. :disabled Styles applied to a form input that is disabled,

    and unable to accept focus or content input. selector:disabled{ property: value; }
  22. :disabled input:disabled{ background: #E3BB33; } <input type="text" /> <input type="text"

    disabled /> <input type="text" /> http://codepen.io/mikekivikoski/pen/WwXBpo
  23. :read-only Styles applied to an element that is not writeable

    
 by a user. selector:read-only{ property: value; }
  24. :read-only :read-only{ background: #E3BB33; } <input type="text" /> <input …

    value="123 Main St" readonly /> <input type="text" /> http://codepen.io/mikekivikoski/details/Rajddj/
  25. :read-write Styles applied when an element is writeable by a

    user. :read-write, selector:read-write{ property: value; }
  26. :read-write :read-write{ background: #E3BB33; } <input … value="123 Main St"

    readonly /> <input type="text" /> <div contenteditable>You can edit me!</div> http://codepen.io/mikekivikoski/pen/JXOzgb
  27. :valid Styles applied to form elements with a value that

    validates according to the element's settings. selector:valid{ property: value; }
  28. :invalid Styles applied to form elements with a value that

    doesn’t validate according to the element's settings. selector:invalid{ property: value; }
  29. :required Styles applied to form elements that have 
 a

    required attribute. selector:required{ property: value; }
  30. :optional Styles applied to form elements that don’t have a

    required attribute. selector:optional{ property: value; }
  31. :indeterminate Styles applied to a checkbox with a javascript based

    indeterminate state or an empty progress bar. selector:indeterminate{ property: value; }
  32. :in-range Styles applied to input elements when their value is

    inside the range specified as being acceptable. selector:in-range{ property: value; }
  33. :out-of-range Styles applied to input elements when their value is

    outside the range specified as being acceptable. selector:out-of—range{ property: value; }
  34. ::placeholder Styles applied to the placeholder content within an input

    element. selector::placeholder{ property: value; }
  35. :first-child Styles applied when the element is the first child

    element of its parent. selector:first-child{ property: value; }
  36. :first-child p:first-child { color: #E3BB33; } <div> <p>Welcome to :first-child's

    demo. This is a leading paragraph.</p> <p>This ends our introduction and begins our hero's story.</p> </div> http://codepen.io/mikekivikoski/pen/zqEYLo
  37. :last-child Styles applied when the element is the last child

    element of its parent. selector:last-child{ property: value; }
  38. :last-child p:last-child { font-size: 0.8em; font-style: italic; } <div> <p>Welcome

    to :last-child's demo.</p> <p>This is some legal or footnote copy.</p> </div> http://codepen.io/mikekivikoski/pen/BKwaXe
  39. :only-child Styles applied to any element that is the only

    child 
 of its parent selector:only-child{ property: value; }
  40. :only-child div{ … width: 50%;} div:only-child{ background: #73E3FC; width: 100%;

    } <section> <div> <h2>Story 1</h2> </div> <div> <h2>Story 2</h2> </div> </section> <section> <div> <h2>Story 1</h2> </div> </section> http://codepen.io/mikekivikoski/pen/wGrBNW
  41. :first-of-type Styles applied to the first child, of a particular

    type, within its parent. selector:first-of-type{ property: value; }
  42. :first-of-type p:first-of-type { color: #E3BB33; } <div> <h1>Headline for First

    of Type</h1> <p>Welcome to :first-child's demo. This is a leading paragraph.</p> <p>This ends our introduction and begins our hero's story.</p> </div> http://codepen.io/mikekivikoski/pen/LNzENm
  43. :last-of-type Styles applied to the last child, of a particular

    type, within its parent. selector:last-of-type{ property: value; }
  44. :last-of-type p:last-of-type { font-size: 0.8em; font-style: italic; } <div> <p>Welcome

    to :last-child's demo.</p> <p>This is some legal or footnote copy.</p> <a href="#cta-link">CTA link</a> </div> http://codepen.io/mikekivikoski/pen/GZMgzg/
  45. :only-of-type Styles applied to the only child, of a particular

    type, within its parent. selector:only-of-type{ property: value; }
  46. :only-of-type div{ … width: 50%;} div:only-of-type{ background: #73E3FC; width: 100%;

    } <section> <div> <h2>Story 1</h2> </div> <div> <h2>Story 2</h2> </div> </section> <section> <div> <h2>Story 1</h2> </div> <p>Caption</p> </section> http://codepen.io/mikekivikoski/pen/VaMLzv
  47. :only-of-type div{ … width: 100%;} div:not(:only-of-type){ width: 50%; } <section>

    <div> <h2>Story 1</h2> </div> <div> <h2>Story 2</h2> </div> </section> <section> <div> <h2>Story 1</h2> </div> <p>Caption</p> </section>
  48. :nth-child(3n) (3n) = 3 * 0 = 0 (3n) =

    3 * 1 = 3 (3n) = 3 * 2 = 6 etc… http://codepen.io/mikekivikoski/pen/yOPxqJ
  49. :nth-child(3n + 2) (3n + 2) = (3 * 0)

    + 2 = 2 (3n + 2) = (3 * 1) + 2 = 5 (3n + 2) = (3 * 2) + 2 = 8 etc… http://codepen.io/mikekivikoski/pen/yOPxqJ
  50. :nth-last-child(n) Styles applied to selector(s) based on their source order

    starting from the bottom of the source order. selector:nth-last-child(n){ property: value; }
  51. Quantity Query li:nth—last-child(n+5){ background: #73E3FC; } Styles applied when there

    are minimum 5 elements. http://codepen.io/mkivikoski/pen/pbKXoW
  52. :nth-of-type(n) Styles applied to selector(s) based on their source order

    and element type. selector:nth-of—type(n){ property: value; }
  53. :nth-last-of-type(n) Styles applied to selector(s) based on their source order

    and element type, starting with bottom of source order. selector:nth-last-of—type(n){ property: value; }
  54. :target Styles applied to the active element that is targeted

    with a fragment identifier in the URL. selector:target{ property: value; }
  55. :target div{ display: none; } div:target{ display: block; } <a

    href="#services">Services</a> <div id="services"></div>
  56. :empty Styles are applied to elements that have no children

    or whitespace. selector:empty{ property: value; }
  57. :scope <section> <style scoped> :scope { background-color: lime; } </style>

    <p>Inside scope.</p> </section> <section> <p>Outside scope.</p> </section>
  58. :has(s1) The relational pseudo-class represents elements whose relative scope selector

    match when evaluated absolute. selector:has(s1){ property: value; } http://css4-selectors.com/selector/css4/relational-pseudo-class/
  59. :not(s1, s2) Allow multiple selectors in the negation :not class.

    selector:not(s1, s2){ property: value; } http://css4-selectors.com/selector/css4/negation-pseudo-class/
  60. :matches(s1, s2) Takes as an argument a selector list to

    create sets of selectors by instituting groups which match all 
 included selectors. selector:matches(s1, s2){ property: value; } http://css4-selectors.com/selector/css4/matches-any-pseudo-class/
  61. :matches(s1, s2) :matches(section, article, aside) h1 { color: red; }

    // is the same as section h1, article h1, aside h1 { color: red; } http://css4-selectors.com/selector/css4/matches-any-pseudo-class/
  62. :local-link Styles website-internal links with ability to style specific depths

    of links. :local-link, :local-link(n){ property: value; } http://css4-selectors.com/selector/css4/local-link-pseudo-class/
  63. :local-link /* http://example.com/link(s) */ :local-link(0) {} /* http://example.com/year/link(s) */ :local-link(1)

    {} /* http://example.com/year/month/link(s) */ :local-link(2) {} http://css4-selectors.com/selector/css4/local-link-pseudo-class/
  64. Some others :nth-match(an+b) :nth-last-match(an+b) :column(s1) :nth-column(an+b) :nth-last-column(an+b) :blank :dir(direction) :any-link

    :lang(*-language) :drop :drop(active) :drop(valid) :drop(invalid) :current :current(s1[, s2, …]) :past :past(s1[, s2, …]) :future :future(s1[, s2, …]) :fullscreen :user-error ::spelling-error ::grammar-error ::marker