50 CSS Selectors

50 Problems Solved

@jdjuan

@jdjuan

@jdjuan

ngcolombia.com

@jdjuan

ngcolombia.com

@jdjuan

@jdjuan

@jdjuan

@jdjuan

slides.com/
jdjuan

@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

@jdjuan

Some operators do not provide a tangible value

@jdjuan

@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-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