Selection

Um seletor muito interessante é o ::selection. Ele serve para estilizar o texto quando está selecionado. Sublinhe esse texto para ver um exemplo.

Ele pode dar um toque no design porque mostra que foi dado atenção aos pequenos grandes detalhes.

::selection {
  background: #BADA55;
  color: white;
} 

Appearance

Essa propriedade é muito interessante quando se quer modificar a aparência nativa de algum elemento HTML e estilizar da maneira que você quiser.

Um exemplo de select box sem estilo:

Opção 1 Opção 2 Opção 3

Um exemplo de um select box estilizado:

A propriedade appearance é possível utilizar os valores “normal”, “none”, “button”, etc.

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
} 

Not

O seletor not é muito útil para excluir elementos dos seletores quando você não precisa deles. Um exemplo é por exemplo quando você quer estilizar todos spans mas não quer alterar os que tenham a classe “item”.

Ele também pode ser utilizada com outros seletores como :first-child, :last-child, etc.

span:not(.item) {
  color #444;
} 

Pointer Events

Pointer events serve para alterar a resposta de elementos html em relação a eventos relacionados ao mouse como clicar ou hover. Você pode fazer com que o click do mouse pare de funcionar para determinado elemento html.

.avoid-clicks {
  pointer-events: none;
} 

Outline

Outline é muito útil quando se quer remover o comportamento padrão do browser de adicionar uma borda a um elemento quando ele esta selecionado. Ela pode ser útil quando voce quer deixar o design mais limpo. Ela é diferente da propriedade border pois adiciona mais uma borda a um elemento.

Cuidado ao remover o comportamento default do browser pois pode deixar seu site mais difícil de utilizar por pessoas que usam teclado para navegação.

div {
  outline: none;
} 

After and Before

Muito útil para adicionar pseudo elementos html apenas usando CSS. Isso deixa seu html mais limpo pois tudo é tratado no css.

div:after {
  content: '♡';
  color: red;
  font-size: 3em;
} 

Columns

Columns serve para repartir um texto em colunas, muito útil para diagramar um texto.

Exemplo de texto em 3 colunas. Exemplo de texto em 3 colunas. Exemplo de texto em 3 colunas. Exemplo de texto em 3 colunas. Exemplo de texto em 3 colunas. Exemplo de texto em 3 colunas. Exemplo de texto em 3 colunas. Exemplo de texto em 3 colunas. Exemplo de texto em 3 colunas. Exemplo de texto em 3 colunas. Exemplo de texto em 3 colunas.

p {
  -webkit-column-count: 3;
  column-count: 3;
} 

Target

Esse seletor funciona quando você quer estilizar algum elemento baseado no estado do hash. Por exemplo quando você tem diferentes sessões na página e quer pintar elas com cores diferentes.

Clique aqui para mudar o estado

#hash-example:target {
  background: #BADA555;
} 

Attribute

Com seletor de atributo você pode estilizar todos elementos que tenham algum atributo especifico como título por exemplo.

Texto com titulo

Texto sem titulo

Texto com titulo

p[title~="titulo"] {
  background: #BADA55;
} 

VH Unit

View port units são utilizadas quando se quer dar um tamanho a um elemento baseado no tamanho de tela visível. Se você utilizar por exemplo esse código:

p {
  height: 20vh;
} 

Isso significa que o parágrafo sempre vai ter 20% de altura baseado no tamanho da tela atual.

Exemplo utilizando view port

Para testar por favor diminua o tamanho do browser e veja o comportamento do parágrafo.

Counters

Counters é útil para gerar contadores por CSS sem que seja preciso utilizar javascript.

No exemplo a seguir os números estão sendo gerados por CSS.

body {
  counter-reset: section;
} 

.counter:before {
  counter-increment: section;
  content: "Sessão " counter(section) ": ";
} 

Resize

Resize é muito útil quando se quer que um elemento seja resizable.

Exemplo de parágrafo resizable. Exemplo de parágrafo resizable. Exemplo de parágrafo resizable.

p {
  resize: both;
}