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.
CSS Pseudo
:hover, :active, & beyond
Mike Kivikoski, @mkivikoski
Warning
These examples are examples and may not be the best use case for your
application due to maintainability, performa...
:classes vs ::elements
Let’s Begin
:link
Styles applied on links that a user has not visited.
a:link{
property: value;
}
:visited
Styles applied on links that a user has visited.
a:visited{
property: value;
}
:hover
Styles applied when user mouses over an element.
selector:hover{
property: value;
}
:hover
a:hover {
color: #73E3FC;
}
<a href="#hello">hello</a>
:focus
Styles applied when an element has received focus via
keyboard or mouse.
selector:focus{
property: value;
}
:focus
a:focus {
color: #73E3FC;
}
<a href="#hello">hello<
<a href="#folks">folks!
<a href="#how">How</a>
<a href="#goes">...
:focus & :hover
a:focus,
a:hover {
color: #73E3FC;
}
<a href="#hello">hello<
<a href="#folks">folks!
<a href="#how">How</a...
:active
Styles applied when user activates an element.
selector:active{
property: value;
}
:active
button:active {
background: #CE6FD3;
}
Content
:lang(language)
Styles applied with match of elements based on the 

document language.
:lang(language){
property: value;
...
:lang(language)
:lang(en) {
color: #73E3FC;
}
:lang(es) {
color: #E3BB33;
font-size: 2em;
}
http://codepen.io/mikekivikosk...
::after
Matches a virtual last child of the selected element.
selector::after{
property: value;
}
::after
div::after {
content: "You’re great!";
}
<div>
Hello there!
</div>
http://codepen.io/mikekivikoski/pen/dMVyPN
::after
div::after {
content: attr(data-complement);
}
<div data-complement="You're great!">
Hello there!
</div>
http://co...
::after
a.external::after,
a[target="_blank"]::after {
content: "2192";
}
http://codepen.io/mikekivikoski/pen/jqaRLO
::before
Matches a virtual first child of the selected element.
selector::before{
property: value;
}
::before
li::before {
content: “1F355”; //pizza!
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
http://codepen.io/m...
::first-letter
Styles are applied to the first letter of 

the specified selector.
selector::first-letter{
property: value...
::first-letter
p::first-letter{
font-size: 2em;
}
<p>Bacon ipsum dolor amet shankle cupim jowl,
pancetta landjaeger beef s...
::first-letter
p::first-letter{
font-size: 2em;
}
http://codepen.io/mikekivikoski/pen/mPBJgw
::first-line
Styles are applied to only the first line of an element.
selector::first-line{
property: value;
}
::first-line
p::first-line{
font-variant: small-caps;
}
<p>Bacon ipsum dolor amet shankle cupim
jowl, pancetta landjaeger ...
::first-line
p::first-line{
font-variant: small-caps;
}
http://codepen.io/mikekivikoski/pen/Xdemrr
::first-line
http://codepen.io/mikekivikoski/pen/Xdemrr
::selection
Styles are applied to elements that have been highlighted
with a mouse.
selector::selection{
property: value;
}
::selection
p::selection{
color: #73E3FC;
}
<p>Bacon ipsum dolor amet shankle cupim
jowl, pancetta landjaeger beef short
r...
::selection
p::selection{
color: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/eZGvKG
http://caniuse.com
::selection
Negation
:not(s)
Is a negation pseudo class accepting a simple selector as
an argument.
selector:not(s){
property: value;
}
:not(s)
li:not(.active){
color: #73E3FC;
}
li:not(:last-child){
border-bottom: 1px solid;
}
<li>First LI</li>
<li class="a...
:not(s)
li:not(.active){
color: #73E3FC;
}
li:not(:last-child){
border-bottom: 1px solid;
}
http://codepen.io/mikekivikosk...
:not and ::after
a:not( [href*='yourdomain.com'] )

:not( [href^='#'] )

:not( [href^='/'] )

::after {
content: "2192";
}...
Forms
:checked
Styles applied to radio, checkbox or option element that
is checked to an on state.
selector:checked{
property: v...
:checked
input:checked + label{
color: #73E3FC;
}
<input type="checkbox">
<label>:checkbox demo label</label>
http://codep...
:disabled
Styles applied to a form input that is disabled, and unable
to accept focus or content input.
selector:disabled{...
:disabled
input:disabled{
background: #666;
}
<input type=“text" disabled>
http://codepen.io/mikekivikoski/pen/WwXBpo
:read-only
Styles applied to an element that is not writeable 

by a user.
selector:read-only{
property: value;
}
:read-only
:read-only{
background: #666;
}
<input … value=“123 Main St" readonly />
<input type="text" />
http://codepen.i...
:read-write
Styles applied when an element is writeable by a user.
:read-write,
selector:read-write{
property: value;
}
:read-write
:read-write{
background: #E3BB33;
}
<input … value=“123 Main St" readonly />
<input type="text" />
<div conten...
:read-write
https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write
:valid
Styles applied to form elements with a value that
validates according to the element's settings.
selector:valid{
pr...
:valid
input:valid{
background: green;
}
<input type="email" />
http://codepen.io/mikekivikoski/pen/reGzaj
http://caniuse.com
:valid
:invalid
Styles applied to form elements with a value that doesn’t
validate according to the element's settings.
selector:...
:invalid
input:invalid{
background: red;
}
<input type="email" />
http://codepen.io/mikekivikoski/pen/GZMvZz
http://caniuse.com
:invalid
:invalid and :valid
input:valid:not(:focus){
background: green;
}
input:invalid:not(:focus){
background: red;
}
<input typ...
:required
Styles applied to form elements that have 

a required attribute.
selector:required{
property: value;
}
:required
input:required{
border-left: 10px solid #E3BB33;
}
<input type=“email" required />
http://codepen.io/mikekivikos...
http://caniuse.com
:required
:optional
Styles applied to form elements that don’t have a
required attribute.
selector:optional{
property: value;
}
:optional
input:optional{
border: 10px solid #ccc;
}
<input type=“email” required/>
<input type=“text” />
http://codepen.i...
:indeterminate
Styles applied to a checkbox with a javascript based
indeterminate state or an empty progress bar.
selector...
:indeterminate
http://codepen.io/mikekivikoski/pen/repNmb
input:indeterminate + label{
background: #E3BB33;
}
:in-range
Styles applied to input elements when their value is
inside the range specified as being acceptable.
selector:in...
:in-range
p:in-range{
border: 5px solid green;
}
<input type="number" min="5" max="10">
http://codepen.io/mikekivikoski/pe...
:in-range
http://caniuse.com
:out-of-range
Styles applied to input elements when their value is
outside the range specified as being acceptable.
select...
:out-of-range
p:out-of—range{
border: 5px solid red;
}
<input type="number" min="5" max="10">
http://codepen.io/mikekiviko...
:out-of-range
http://caniuse.com
::placeholder
Styles applied to the placeholder content within an input
element.
selector::placeholder{
property: value;
}
::placeholder
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder
{ color: #f0f;}
<...
::placeholder
http://caniuse.com
:placeholder-shown
Styles applied to the actual input with placeholder text.
selector:placeholder-shown{
property: value;
}
:placeholder-shown
input:placeholder-shown{
border: 5px solid #E3BB33;
}
<input type="text" placeholder="throw your
hands ...
:placeholder-shown
http://caniuse.com
Layout
:first-child
Styles applied when the element is the first child element
of its parent.
selector:first-child{
property: val...
:first-child
p:first-child {
color: #E3BB33;
}
<div>
<p>Welcome to :first-child's demo. This
is a leading paragraph.</p>
<...
:first-child
p:first-child {
color: #E3BB33;
}
http://codepen.io/mikekivikoski/pen/zqEYLo
:last-child
Styles applied when the element is the last child element
of its parent.
selector:last-child{
property: value;...
:last-child
p:last-child {
font-size: 0.8em;
font-style: italic;
}
<div>
<p>Welcome to :last-child's demo.</p>
<p>This is ...
:last-child
p:last-child {
font-size: 0.8em;
font-style: italic;
}
http://codepen.io/mikekivikoski/pen/BKwaXe/
:only-child
Styles applied to any element that is the only child 

of its parent
selector:only-child{
property: value;
}
:only-child
div{ … width: 50%;}
div:only-child{
background: #73E3FC;
width: 100%;
}
<section>
<div>
<h2>Story 1</h2>
</div...
:only-child
http://codepen.io/mikekivikoski/pen/wGrBNW
div{ … width: 50%;}
div:only-child{
background: #73E3FC;
width: 100...
:first-of-type
Styles applied to the first child, of a particular type,
within its parent.
selector:first-of-type{
propert...
:first-of-type
p:first-of-type {
color: #E3BB33;
}
<div>
<h1>Headline for First of Type</h1>
<p>Welcome to :first-child's ...
:first-of-type
p:first-of-type {
color: #E3BB33;
font-size: 1.5em;
}
http://codepen.io/mikekivikoski/pen/LNzENm
:last-of-type
Styles applied to the last child, of a particular type,
within its parent.
selector:last-of-type{
property: ...
: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...
:last-of-type
p:last-of-type {
font-size: 0.8em;
font-style: italic;
}
http://codepen.io/mikekivikoski/pen/GZMgzg/
:only-of-type
Styles applied to the only child, of a particular type,
within its parent.
selector:only-of-type{
property: ...
:only-of-type
div{ … width: 50%;}
div:only-of-type{
background: #73E3FC;
width: 100%;
}
<section>
<div>
<h2>Story 1</h2>
<...
:only-of-type
http://codepen.io/mikekivikoski/pen/VaMLzv
div{ … width: 50%;}
div:only-of-type{
background: #73E3FC;
width:...
:only-of-type
div{ … width: 100%;}
div:not(:only-of-type){
width: 50%;
}
<section>
<div>
<h2>Story 1</h2>
</div>
<div>
<h2...
:nth-child(n)
Styles applied to selector(s) based on their source order.
selector:nth-child(n){
property: value;
}
:nth-child(3)
li:nth-child(3) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/VarxYr
<ul>
<li>One</li>
<li>Tw...
:nth-child(odd)
li:nth-child(odd) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/VarxYr
<ul>
<li>One</li>
<l...
:nth-child(even)
li:nth-child(even) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/ONOozG?editors=1100
<ul>
...
:nth-child(3n)
li:nth-child(3n) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/yOPxqJ
<ul>
<li>One</li>
<li>...
:nth-child(3n+2)
li:nth-child(3n+2) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/XdzPoa
<ul>
<li>One</li>
...
:nth-child(5n-3)
li:nth-child(5n-3) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/NNwLoq
<ul>
<li>One</li>
...
:nth-child(-n+4)
li:nth-child(-n+4) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/VarGgE
<ul>
<li>One</li>
...
:nth-child(n+5)
li:nth-child(n+5) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/WwXgmQ
<ul>
<li>One</li>
<l...
:nth-child(n+2):nth-child(-n+6)
li:nth-child(n+2):nth-child(-n+6) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski...
range with even
li:nth-child(n+3):nth-child(even):nth-
child(-n+6) {
background: #73E3FC;
}
http://codepen.io/mikekivikosk...
:nth-last-child(n)
Styles applied to selector(s) based on their source order
starting from the bottom of the source order....
:nth-last-child(3)
li:nth—last-child(3){
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/KzyGKN
<ul>
<li>One</l...
Quantity Query
li:nth—last-child(7):first-child{
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/mPqzdZ/
<ul>
<...
Quantity Query
li:nth—last-child(7):first-child,
li:nth—last-child(7):first-child ~li{
background: #73E3FC;
}
<ul>
<li>On
...
Quantity Query
li:nth—last-child(n+5){
background: #73E3FC;
}
Styles applied when there are minimum 5 elements.
:nth-of-type(n)
Styles applied to selector(s) based on their source order
and element type.
selector:nth-of—type(n){
prope...
:nth-last-of-type(n)
Styles applied to selector(s) based on their source order
and element type, starting with bottom of s...
:target
Styles applied to the active element that is targeted with a
fragment identifier in the URL.
selector:target{
prop...
:target
div{ display: none; }
div:target{
display: block;
}
<a href=“#services”>Services</a>
<div id=“services”></div>
:target
:scope
Styles applied within parent element of scoped HTML.
:scope{
property: value;
}
:scope
<section>
<style scoped>
:scope { background-color: lime; }
</style>
<p>Inside scope.</p>
</section>
<section>
<p>O...
:scope
https://developer.mozilla.org/en-US/docs/Web/CSS/:scope
:root
Styles applied to the highest level parent element.
:root{
property: value;
}
:empty
Styles are applied to elements that have no children or
whitespace.
selector:empty{
property: value;
}
:empty
div:empty{
background: #E3BB33;
}
<div>
Hello world
</div>
<div></div>
<div> </div>
codepen.io/mikekivikoski/pen/xV...
:empty
div:empty{
background: #E3BB33;
}
http://codepen.io/mikekivikoski/pen/xVXdBx
In the future
:has(s1)
The relational pseudo-class represents elements whose
relative scope selector match when evaluated absolute.
sele...
:has(s1)
header:has(h1) {
background-color: #E3BB33;
}
http://css4-selectors.com/selector/css4/relational-pseudo-class/
:not(s1, s2)
Allow multiple selectors in the negation :not class.
selector:not(s1, s2){
property: value;
}
http://css4-sel...
:not(s1, s2)
a:not(
[href*=‘yourdomain.com’],
[href^='#'],
[href^=‘/']
)::after {
content: "2192";
}
<a href=“http://anoth...
:matches(s1, s2)
Takes as an argument a selector list to create sets of
selectors by instituting groups which match all 

...
:matches(s1, s2)
:matches(section, article, aside) h1 {
color: red;
}
// is the same as
section h1, article h1, aside h1 {...
:local-link
Styles website-internal links with ability to style specific
depths of links.
:local-link,
:local-link(n){
pro...
:local-link
/* http://example.com/ link(s) */
:local-link(0) {}
/* http://example.com/year/ link(s) */
:local-link(1) {}
/...
:focus-within
TODO
:local-link,
:local-link(n){
property: value;
}
http://css4-selectors.com/selector/css4/local-link-pseu...
:local-link
/* http://example.com/ link(s) */
:local-link(0) {}
/* http://example.com/year/ link(s) */
:local-link(1) {}
/...
Some others
:nth-match(an+b)
:nth-last-match(an+b)
:column(s1)
:nth-column(an+b)
:nth-last-column(an+b)
:blank
:dir(direct...
Thanks!
@mkivikoski
Resources
developer.mozilla.org, w3schools, css4-selectors, css-tricks, caniuse,
quantity-queries-for-css, nthmaster.com, ...
Pseudo Puzzle
bit.ly/pseudo-puzzle
Fork it and share with me on twitter, @mkivikoski
Upcoming SlideShare
Loading in …5
×

CSS Psuedo and beyond

497 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

CSS Psuedo and beyond

  1. 1. CSS Pseudo :hover, :active, & beyond Mike Kivikoski, @mkivikoski
  2. 2. Warning These examples are examples and may not be the best use case for your application due to maintainability, performance and specificity.
  3. 3. :classes vs ::elements
  4. 4. Let’s Begin
  5. 5. :link Styles applied on links that a user has not visited. a:link{ property: value; }
  6. 6. :visited Styles applied on links that a user has visited. a:visited{ property: value; }
  7. 7. :hover Styles applied when user mouses over an element. selector:hover{ property: value; }
  8. 8. :hover a:hover { color: #73E3FC; } <a href="#hello">hello</a>
  9. 9. :focus Styles applied when an element has received focus via keyboard or mouse. selector:focus{ property: value; }
  10. 10. :focus a:focus { color: #73E3FC; } <a href="#hello">hello< <a href="#folks">folks! <a href="#how">How</a> <a href="#goes">goes?</
  11. 11. :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?</
  12. 12. :active Styles applied when user activates an element. selector:active{ property: value; }
  13. 13. :active button:active { background: #CE6FD3; }
  14. 14. Content
  15. 15. :lang(language) Styles applied with match of elements based on the 
 document language. :lang(language){ property: value; } selector:lang(language){ property: value; }
  16. 16. :lang(language) :lang(en) { color: #73E3FC; } :lang(es) { color: #E3BB33; font-size: 2em; } http://codepen.io/mikekivikoski/pen/KzXPJG
  17. 17. ::after Matches a virtual last child of the selected element. selector::after{ property: value; }
  18. 18. ::after div::after { content: "You’re great!"; } <div> Hello there! </div> http://codepen.io/mikekivikoski/pen/dMVyPN
  19. 19. ::after div::after { content: attr(data-complement); } <div data-complement="You're great!"> Hello there! </div> http://codepen.io/mikekivikoski/pen/VaMwvb
  20. 20. ::after a.external::after, a[target="_blank"]::after { content: "2192"; } http://codepen.io/mikekivikoski/pen/jqaRLO
  21. 21. ::before Matches a virtual first child of the selected element. selector::before{ property: value; }
  22. 22. ::before li::before { content: “1F355”; //pizza! } <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> http://codepen.io/mikekivikoski/pen/EKwxyP
  23. 23. ::first-letter Styles are applied to the first letter of 
 the specified selector. selector::first-letter{ property: value; }
  24. 24. ::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
  25. 25. ::first-letter p::first-letter{ font-size: 2em; } http://codepen.io/mikekivikoski/pen/mPBJgw
  26. 26. ::first-line Styles are applied to only the first line of an element. selector::first-line{ property: value; }
  27. 27. ::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
  28. 28. ::first-line p::first-line{ font-variant: small-caps; } http://codepen.io/mikekivikoski/pen/Xdemrr
  29. 29. ::first-line http://codepen.io/mikekivikoski/pen/Xdemrr
  30. 30. ::selection Styles are applied to elements that have been highlighted with a mouse. selector::selection{ property: value; }
  31. 31. ::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
  32. 32. ::selection p::selection{ color: #73E3FC; } http://codepen.io/mikekivikoski/pen/eZGvKG
  33. 33. http://caniuse.com ::selection
  34. 34. Negation
  35. 35. :not(s) Is a negation pseudo class accepting a simple selector as an argument. selector:not(s){ property: value; }
  36. 36. :not(s) li:not(.active){ color: #73E3FC; } li:not(:last-child){ border-bottom: 1px solid; } <li>First LI</li> <li class="active">Active LI</li> <li>Third LI</li> <li>Last LI</li> http://codepen.io/mikekivikoski/pen/YqrQzN
  37. 37. :not(s) li:not(.active){ color: #73E3FC; } li:not(:last-child){ border-bottom: 1px solid; } http://codepen.io/mikekivikoski/pen/YqrQzN
  38. 38. :not and ::after a:not( [href*='yourdomain.com'] )
 :not( [href^='#'] )
 :not( [href^='/'] )
 ::after { content: "2192"; } <a href=“http://anothersite.com"> To another site! </a>
  39. 39. Forms
  40. 40. :checked Styles applied to radio, checkbox or option element that is checked to an on state. selector:checked{ property: value; }
  41. 41. :checked input:checked + label{ color: #73E3FC; } <input type="checkbox"> <label>:checkbox demo label</label> http://codepen.io/mikekivikoski/pen/YqrXvW
  42. 42. :disabled Styles applied to a form input that is disabled, and unable to accept focus or content input. selector:disabled{ property: value; }
  43. 43. :disabled input:disabled{ background: #666; } <input type=“text" disabled> http://codepen.io/mikekivikoski/pen/WwXBpo
  44. 44. :read-only Styles applied to an element that is not writeable 
 by a user. selector:read-only{ property: value; }
  45. 45. :read-only :read-only{ background: #666; } <input … value=“123 Main St" readonly /> <input type="text" /> http://codepen.io/mikekivikoski/details/Rajddj/
  46. 46. :read-write Styles applied when an element is writeable by a user. :read-write, selector:read-write{ property: value; }
  47. 47. :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
  48. 48. :read-write https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write
  49. 49. :valid Styles applied to form elements with a value that validates according to the element's settings. selector:valid{ property: value; }
  50. 50. :valid input:valid{ background: green; } <input type="email" /> http://codepen.io/mikekivikoski/pen/reGzaj
  51. 51. http://caniuse.com :valid
  52. 52. :invalid Styles applied to form elements with a value that doesn’t validate according to the element's settings. selector:invalid{ property: value; }
  53. 53. :invalid input:invalid{ background: red; } <input type="email" /> http://codepen.io/mikekivikoski/pen/GZMvZz
  54. 54. http://caniuse.com :invalid
  55. 55. :invalid and :valid input:valid:not(:focus){ background: green; } input:invalid:not(:focus){ background: red; } <input type="email" /> http://codepen.io/mikekivikoski/pen/zqEdBz
  56. 56. :required Styles applied to form elements that have 
 a required attribute. selector:required{ property: value; }
  57. 57. :required input:required{ border-left: 10px solid #E3BB33; } <input type=“email" required /> http://codepen.io/mikekivikoski/pen/NNavgq
  58. 58. http://caniuse.com :required
  59. 59. :optional Styles applied to form elements that don’t have a required attribute. selector:optional{ property: value; }
  60. 60. :optional input:optional{ border: 10px solid #ccc; } <input type=“email” required/> <input type=“text” /> http://codepen.io/mikekivikoski/pen/BKmbvV
  61. 61. :indeterminate Styles applied to a checkbox with a javascript based indeterminate state or an empty progress bar. selector:indeterminate{ property: value; }
  62. 62. :indeterminate http://codepen.io/mikekivikoski/pen/repNmb input:indeterminate + label{ background: #E3BB33; }
  63. 63. :in-range Styles applied to input elements when their value is inside the range specified as being acceptable. selector:in-range{ property: value; }
  64. 64. :in-range p:in-range{ border: 5px solid green; } <input type="number" min="5" max="10"> http://codepen.io/mikekivikoski/pen/WwXRYP
  65. 65. :in-range http://caniuse.com
  66. 66. :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; }
  67. 67. :out-of-range p:out-of—range{ border: 5px solid red; } <input type="number" min="5" max="10"> http://codepen.io/mikekivikoski/pen/WwXRYP
  68. 68. :out-of-range http://caniuse.com
  69. 69. ::placeholder Styles applied to the placeholder content within an input element. selector::placeholder{ property: value; }
  70. 70. ::placeholder ::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder { color: #f0f;} <input type="text" placeholder="throw your hands in the air" />
  71. 71. ::placeholder http://caniuse.com
  72. 72. :placeholder-shown Styles applied to the actual input with placeholder text. selector:placeholder-shown{ property: value; }
  73. 73. :placeholder-shown input:placeholder-shown{ border: 5px solid #E3BB33; } <input type="text" placeholder="throw your hands in the air" /> http://codepen.io/mikekivikoski/pen/ZWaLNG
  74. 74. :placeholder-shown http://caniuse.com
  75. 75. Layout
  76. 76. :first-child Styles applied when the element is the first child element of its parent. selector:first-child{ property: value; }
  77. 77. :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
  78. 78. :first-child p:first-child { color: #E3BB33; } http://codepen.io/mikekivikoski/pen/zqEYLo
  79. 79. :last-child Styles applied when the element is the last child element of its parent. selector:last-child{ property: value; }
  80. 80. :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
  81. 81. :last-child p:last-child { font-size: 0.8em; font-style: italic; } http://codepen.io/mikekivikoski/pen/BKwaXe/
  82. 82. :only-child Styles applied to any element that is the only child 
 of its parent selector:only-child{ property: value; }
  83. 83. :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
  84. 84. :only-child http://codepen.io/mikekivikoski/pen/wGrBNW div{ … width: 50%;} div:only-child{ background: #73E3FC; width: 100%; }
  85. 85. :first-of-type Styles applied to the first child, of a particular type, within its parent. selector:first-of-type{ property: value; }
  86. 86. :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
  87. 87. :first-of-type p:first-of-type { color: #E3BB33; font-size: 1.5em; } http://codepen.io/mikekivikoski/pen/LNzENm
  88. 88. :last-of-type Styles applied to the last child, of a particular type, within its parent. selector:last-of-type{ property: value; }
  89. 89. :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</a> </div> http://codepen.io/mikekivikoski/pen/GZMgzg/
  90. 90. :last-of-type p:last-of-type { font-size: 0.8em; font-style: italic; } http://codepen.io/mikekivikoski/pen/GZMgzg/
  91. 91. :only-of-type Styles applied to the only child, of a particular type, within its parent. selector:only-of-type{ property: value; }
  92. 92. :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
  93. 93. :only-of-type http://codepen.io/mikekivikoski/pen/VaMLzv div{ … width: 50%;} div:only-of-type{ background: #73E3FC; width: 100%; }
  94. 94. :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>
  95. 95. :nth-child(n) Styles applied to selector(s) based on their source order. selector:nth-child(n){ property: value; }
  96. 96. :nth-child(3) li:nth-child(3) { background: #73E3FC; } http://codepen.io/mikekivikoski/pen/VarxYr <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
  97. 97. :nth-child(odd) li:nth-child(odd) { background: #73E3FC; } http://codepen.io/mikekivikoski/pen/VarxYr <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
  98. 98. :nth-child(even) li:nth-child(even) { background: #73E3FC; } http://codepen.io/mikekivikoski/pen/ONOozG?editors=1100 <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
  99. 99. :nth-child(3n) li:nth-child(3n) { background: #73E3FC; } http://codepen.io/mikekivikoski/pen/yOPxqJ <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> </ul>
  100. 100. :nth-child(3n+2) li:nth-child(3n+2) { background: #73E3FC; } http://codepen.io/mikekivikoski/pen/XdzPoa <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> </ul>
  101. 101. :nth-child(5n-3) li:nth-child(5n-3) { background: #73E3FC; } http://codepen.io/mikekivikoski/pen/NNwLoq <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> </ul>
  102. 102. :nth-child(-n+4) li:nth-child(-n+4) { background: #73E3FC; } http://codepen.io/mikekivikoski/pen/VarGgE <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> </ul>
  103. 103. :nth-child(n+5) li:nth-child(n+5) { background: #73E3FC; } http://codepen.io/mikekivikoski/pen/WwXgmQ <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> </ul>
  104. 104. :nth-child(n+2):nth-child(-n+6) li:nth-child(n+2):nth-child(-n+6) { background: #73E3FC; } http://codepen.io/mikekivikoski/pen/vGWzPb
  105. 105. range with even li:nth-child(n+3):nth-child(even):nth- child(-n+6) { background: #73E3FC; } http://codepen.io/mikekivikoski/pen/vGWzPb
  106. 106. :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; }
  107. 107. :nth-last-child(3) li:nth—last-child(3){ background: #73E3FC; } http://codepen.io/mikekivikoski/pen/KzyGKN <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> </ul>
  108. 108. Quantity Query li:nth—last-child(7):first-child{ background: #73E3FC; } http://codepen.io/mikekivikoski/pen/mPqzdZ/ <ul> <li>One</li <li>Two</li <li>Three</ <li>Four</l <li>Five</l <li>Six</li <li>Seven</ </ul>
  109. 109. Quantity Query li:nth—last-child(7):first-child, li:nth—last-child(7):first-child ~li{ background: #73E3FC; } <ul> <li>On <li>Tw <li>Th <li>Fo <li>Fi <li>Si <li>Se </ul>
  110. 110. Quantity Query li:nth—last-child(n+5){ background: #73E3FC; } Styles applied when there are minimum 5 elements.
  111. 111. :nth-of-type(n) Styles applied to selector(s) based on their source order and element type. selector:nth-of—type(n){ property: value; }
  112. 112. :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; }
  113. 113. :target Styles applied to the active element that is targeted with a fragment identifier in the URL. selector:target{ property: value; }
  114. 114. :target div{ display: none; } div:target{ display: block; } <a href=“#services”>Services</a> <div id=“services”></div>
  115. 115. :target
  116. 116. :scope Styles applied within parent element of scoped HTML. :scope{ property: value; }
  117. 117. :scope <section> <style scoped> :scope { background-color: lime; } </style> <p>Inside scope.</p> </section> <section> <p>Outside scope.</p> </section>
  118. 118. :scope https://developer.mozilla.org/en-US/docs/Web/CSS/:scope
  119. 119. :root Styles applied to the highest level parent element. :root{ property: value; }
  120. 120. :empty Styles are applied to elements that have no children or whitespace. selector:empty{ property: value; }
  121. 121. :empty div:empty{ background: #E3BB33; } <div> Hello world </div> <div></div> <div> </div> codepen.io/mikekivikoski/pen/xVXdBx
  122. 122. :empty div:empty{ background: #E3BB33; } http://codepen.io/mikekivikoski/pen/xVXdBx
  123. 123. In the future
  124. 124. :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/
  125. 125. :has(s1) header:has(h1) { background-color: #E3BB33; } http://css4-selectors.com/selector/css4/relational-pseudo-class/
  126. 126. :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/
  127. 127. :not(s1, s2) a:not( [href*=‘yourdomain.com’], [href^='#'], [href^=‘/'] )::after { content: "2192"; } <a href=“http://anothersite.com"> To another site! </a>
  128. 128. :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/
  129. 129. :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/
  130. 130. :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/
  131. 131. :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/
  132. 132. :focus-within TODO :local-link, :local-link(n){ property: value; } http://css4-selectors.com/selector/css4/local-link-pseudo-class/
  133. 133. :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/
  134. 134. 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
  135. 135. Thanks! @mkivikoski
  136. 136. Resources developer.mozilla.org, w3schools, css4-selectors, css-tricks, caniuse, quantity-queries-for-css, nthmaster.com, Pseudo and pseudon’t
  137. 137. Pseudo Puzzle bit.ly/pseudo-puzzle Fork it and share with me on twitter, @mkivikoski

×