Seletores Avançados CSS

Seletores Avançados CSS

Seletor atributo: *[atributo] {}

Seletor valor do atributo:

*[atributo='valor'] {} e suas variações

Seletor filho (direto): .pai > .filho {}
Seletor irmão geral: irmao ~ .outro_irmao {}
Seletor irmão adjacente: .irmao + .outro_irmao {}

Leitura complementar: 

http://www.maujor.com/tutorial/guia-completo-seletores-css3.php

http://www.w3.org/TR/css3-selectors/

Seletores Avançados:

Pseudo-Classes

Pseudo-Classes

Abstrações de estados que o elementos HTML podem sofrer

seletor:pseudo-classe {

      propriedade: valor;

}

Pseudo-Classes

Exemplos

a:link {color: blue;}

a:visited {color: purple;}

a:hover {color: red;}

a:active {color: yellow;}

elemento:hover {color: yellow;}

#id:first-child {color: green;}

#id:only-child {color: magenta;}

#id:empty {color: grey;}

input:invalid {color: red;}

input:in-range {color: grey;}

 

Pseudo-Classes

Exemplos

.classe:enabled {background-color: green;}

.classe:disabled {background-color: red;}

elemento:checked {background-color: blue;}

:not(seletor) {background-color: red;}

input:focus {background-color: black;}

element:nth-child(odd) {background-color: red;}

element:nth-child(even) {background-color: black;}

Leitura complementar: 

https://css-tricks.com/pseudo-class-selectors/

Seletores Avançados:

Pseudo-Elementos

Pseudo-Elementos

Abstrações de partes de elementos HTML. Esses pseudos elementos não existem realmente como elementos. Geralmente, são apenas partes de elementos existentes

seletor::pseudo-elemento {

      propriedade: valor;

}

Pseudo-Elementos

Exemplos

p::before {color: blue;}

p::after {color: purple;}

p::first-line {color: red;}

p::first-letter {color: yellow;}

p::selection {color: yellow;}

Leitura complementar: 

https://css-tricks.com/pseudo-element-roundup/

http://webdesign.tutsplus.com/courses/exploring-css-pseudo-elements

Show me the Code!

Filtros em Imagens

.filter-me {

       filter: <filter-function> [<filter-function>]* | none

}

grayscale()

invert()

saturate()

sepia()

Leitura complementar: 

https://css-tricks.com/almanac/properties/f/filter/

http://tableless.com.br/css-filters-aplicando-filtros-em-imagens-com-css/

blur()

brightness()

contrast()

drop-shadow()

Vendor Prefixes

Vendor Prefixes

CSS vendor prefixes ou CSS browser prefixes adicionar suporte a novas features CSS para fins de testes.

Android: -webkit-
iOS: -webkit-
Chrome: -webkit-
Safari: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
Opera: -o-

Leitura complementar: 

https://css-tricks.com/how-to-deal-with-vendor-prefixes/

http://peter.sh/experiments/vendor-prefixed-css-property-overview/

Box Model

Box Model

Unidades

Unidades

Existem dos tipos de unidades no CSS:
  Absolutas              Relativas

cm

mm

in

px

pt

pc

em

%

rem

vw

vh

vmin

vmax