Presentations
Templates
Features
Teams
Pricing
Log in
Sign up
Log in
Sign up
Menu
50 CSS Selectors
50 Problems Solved
@jdjuan
@jdjuan
@jdjuan
ngcolombia.com
@jdjuan
ngcolombia.com
@jdjuan
@jdjuan
@jdjuan
@jdjuan
slides.com/
jdjuan
@jdjuan
CONCLUSION #1
@jdjuan
Most CSS problems can be solved using IDs
@jdjuan
Most CSS problems can be solved using classes
@jdjuan
Adding classes documents our HTML
@jdjuan
The problems resides on maintainability
@jdjuan
CONCLUSION #2
@jdjuan
Some operators do not provide a tangible value
@jdjuan
CONCLUSION #3
@jdjuan
Some operators might not even become standard
@jdjuan
@jdjuan
Context
Simple Selectors
Group Selectors
@jdjuan
@jdjuan
Combi-nators
Attribute Selectors
@jdjuan
Pseudo Selectors
@jdjuan
@jdjuan
Combi-nators
@jdjuan
@jdjuan
@jdjuan
@jdjuan
@jdjuan
Attribute Selectors
@jdjuan
Attribute Selectors
@jdjuan
Attribute Selectors
@jdjuan
Exact value
@jdjuan
Starts with
Ends with
Contains
Pseudo-Selectors
@jdjuan
Pseudo-clases
Â
@jdjuan
:hover
@jdjuan
:not
@jdjuan
Turn gray images
#a11y
@jdjuan
:focus
@jdjuan
Open
here
Use it
for
inputs
:checked
@jdjuan
Change color on check
:disabled
@jdjuan
Add styles to disabled inputs
:matches
@jdjuan
Reduce clutter on pseudo-elements
:link
:hover
:active
:visited
Before any click
After visiting link
On Mouse over
On Click
:active
@jdjuan
Hide anything you click on
:nth-child(n)
@jdjuan
Apply to even items only
Apply to every 3rd item
Apply to 7th item only
:nth-last-child(n)
@jdjuan
Counting from the end
:nth-of-type(n)
@jdjuan
Counting only certain types
@jdjuan
Pseudo-elements
::after
@jdjuan
::first-letter
@jdjuan
Increase first letter size
::first-line
@jdjuan
Increase first line size
::selection
@jdjuan
Change background color on selection
Unusual Selectors
@jdjuan
:empty
@jdjuan
Nodes with no children
:valid
@jdjuan
Inputs with valid values on it
#forms
:only-of-type
@jdjuan
Child whose siblings are of a different type
:optional
@jdjuan
Non-required inputs on a form
:in-range
@jdjuan
Inputs with valid values on it, that are within a range
@jdjuan
THANK YOU!
@jdjuan
THANK YOU!
CSS Selectors
By Juan Herrera
Source:
Carlos Alberto Angulo Mendoza
CSS Selectors
1,129
Juan Herrera
Google Developer Expert in Angular & Web Technologies
jdjuan
More from
Juan Herrera