Algo que sempre deixa meio tonto qualquer desenvolvedor são os seletores CSS e a maneira como utilizá-los em combinação. E pra ajudar a entender como funcionam, resolvemos organizar aqui de forma bem simples as maneiras mais básicas de como usar os seletores e suas combinações. Traduzimos isto de uma tela de wizard do TopStyle:

Simples

Um seletor simples é um que se aplica a um elemento HTML específico. Por exemplo:

H1 {color: red}

Irá afetar todos os elementos H1 em um documento HTML colorindo-os em vermelho.

Classe

Um seletor de classe define um estilo que se aplica a todos os elementos de uma classe específica. Por exemplo:

DIV.alert {color: red}

irá aplicar em todas elementos DIV que tiverem a class “alert” (assim, DIV CLASS=’alert’).

Contextual

Um seletor contextual se aplica a elementos com uma ancestral específico. Por exemplo:

H1 EM {color: red}

aplica para os elementos EM que estão dentro do elemento H1.

Filho

Um seletor filho define um estilo que será aplicado a elementos com um pai específico. Por exemplo:

DIV > P {color: red}

irá aplicar em todos os elementos P que tenham uma DIV como pai.

Sibling

Um seletor sibling define um estilo que será aplicado aos elementos que são precedidos por um elemento específico dentro de um mesmo pai. Por exemplo:

H1 + H2 {color: red}

irá aplicar a todos os elementos H2 que são precedidos por um elemento H1.

Divulgar artigos não é o objetivo principal deste site, mas como esta informação é útil para nossa equipe, esperamos que venha a servir pra mais alguém.