From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../learn/css/building_blocks/selectors/index.html | 234 +++++++++++++++++++++ 1 file changed, 234 insertions(+) create mode 100644 files/pt-br/learn/css/building_blocks/selectors/index.html (limited to 'files/pt-br/learn/css/building_blocks/selectors/index.html') diff --git a/files/pt-br/learn/css/building_blocks/selectors/index.html b/files/pt-br/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..34562ced95 --- /dev/null +++ b/files/pt-br/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,234 @@ +--- +title: CSS selectors +slug: Learn/CSS/Building_blocks/Selectors +tags: + - Attribute + - Beginner + - CSS + - Class + - Learn + - NeedsTranslation + - Pseudo + - Selectors + - TopicStub + - id +translation_of: Learn/CSS/Building_blocks/Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

Em {{Glossary("CSS")}}, os seletores são usados ​​para direcionar os elementos {{glossary("HTML")}} em nossas páginas da web que queremos estilizar. Há uma grande variedade de seletores CSS disponíveis, permitindo uma precisão refinada ao selecionar os elementos a serem estilizados. Neste artigo e seus sub-artigos, examinaremos os diferentes tipos em grande detalhe, vendo como eles funcionam.

+ + + + + + + + + + + + +
Pré-requisitos:Conhecimento básico de informática, software básico instalado , conhecimento básico de como trabalhar com arquivos , conceitos básicos de HTML (estude Introdução ao HTML ) e uma ideia de como o CSS funciona (estude os primeiros passos do CSS ).
Objetivo:Para saber como os seletores CSS funcionam em detalhes.
+ +

O que é um seletor?

+ +

Você já conheceu os seletores. Um seletor CSS é a primeira parte de uma regra CSS. É um padrão de elementos e outros termos que informam ao navegador quais elementos HTML devem ser selecionados para que os valores de propriedade CSS dentro da regra sejam aplicados a eles. O elemento ou elementos que são selecionados pelo seletor são referidos como o assunto do seletor .

+ +

Some code with the h1 highlighted.

+ +

Em artigos anteriores, você conheceu alguns seletores diferentes e aprendeu que existem seletores que direcionam o documento de maneiras diferentes - por exemplo, selecionando um elemento como h1, ou uma classe como .special.

+ +

Em CSS, os seletores são definidos na especificação dos seletores CSS; como qualquer outra parte do CSS, eles precisam ter suporte em navegadores para funcionarem. A maioria dos seletores que você encontrará são definidos na especificação de Seletores de nível 3 , que é uma especificação madura, portanto, você encontrará um excelente suporte de navegador para esses seletores.

+ +

Listas de seleção

+ +

Se você tiver mais de um item que usa o mesmo CSS, os seletores individuais podem ser combinados em uma lista de seletores para que a regra seja aplicada a todos os seletores individuais. Por exemplo, se eu tiver o mesmo CSS para um h1e também para uma classe de .special, poderia escrever isso como duas regras separadas.

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

Eu também poderia combiná-los em uma lista de seletores, adicionando uma vírgula entre eles.

+ +
h1, .special {
+  color: blue;
+}
+ +

O espaço em branco é válido antes ou depois da vírgula. Você também pode achar os seletores mais legíveis se cada um estiver em uma nova linha.

+ +
h1,
+.special {
+  color: blue;
+}
+ +

No exemplo ao vivo abaixo, tente combinar os dois seletores que têm declarações idênticas. A exibição visual deve ser a mesma após combiná-los.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

Ao agrupar seletores dessa forma, se algum seletor for inválido, a regra inteira será ignorada.

+ +

No exemplo a seguir, a regra do seletor de classe inválida será ignorada, enquanto o h1ainda seria estilizado.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

Quando combinados, no entanto, nem o h1nem a classe terão o estilo, pois a regra inteira é considerada inválida.

+ +
h1, ..special {
+  color: blue;
+}
+ +

Tipos de seletores

+ +

Existem alguns agrupamentos diferentes de seletores e saber qual tipo de seletor você pode precisar o ajudará a encontrar a ferramenta certa para o trabalho. Nos subartículos deste artigo, examinaremos os diferentes grupos de seletores com mais detalhes.

+ +

Seletores de tipo, classe e ID

+ +

Este grupo inclui seletores que têm como alvo um elemento HTML, como um <h1>.

+ +
h1 { }
+ +

Também inclui seletores que direcionam uma classe:

+ +
.box { }
+ +

ou um ID:

+ +
#unique { }
+ +

Seletores de atributos

+ +

Este grupo de seletores oferece diferentes maneiras de selecionar elementos com base na presença de um determinado atributo em um elemento:

+ +
a[title] { }
+ +

Ou até mesmo faça uma seleção com base na presença de um atributo com um valor específico:

+ +
a[href="https://example.com"] { }
+ +

Pseudo classes e pseudo-elementos

+ +

Este grupo de seletores inclui pseudo classes, que definem o estilo de certos estados de um elemento. A :hoverpseudoclasse, por exemplo, seleciona um elemento apenas quando ele está sendo passado pelo ponteiro do mouse:

+ +
a:hover { }
+ +

Também inclui pseudoelementos, que selecionam uma determinada parte de um elemento em vez do próprio elemento. Por exemplo, ::first-linesempre seleciona a primeira linha de texto dentro de um elemento (a <p>no caso abaixo), agindo como se a tivesse <span>sido colocado em volta da primeira linha formatada e então selecionado.

+ +
p::first-line { }
+ +

Combinadores

+ +

O grupo final de seletores combina outros seletores para direcionar os elementos em nossos documentos. O seguinte, por exemplo, seleciona parágrafos que são filhos diretos de <article>elementos usando o combinador filho ( >):

+ +
article > p { }
+ +

Próximos passos

+ +

Você pode dar uma olhada na tabela de referência de seletores abaixo para obter links diretos para os vários tipos de seletores nesta seção Aprender ou no MDN em geral, ou continuar para iniciar sua jornada descobrindo sobre seletores de tipo, classe e ID .

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Tabela de referência de seletores

+ +

A tabela a seguir fornece uma visão geral dos seletores disponíveis para uso, juntamente com links para as páginas deste guia que mostram como usar cada tipo de seletor. Também incluí um link para a página MDN de cada seletor, onde você pode verificar as informações de suporte do navegador. Você pode usar isso como uma referência para voltar quando precisar consultar os seletores mais tarde no material, ou quando você experimentar CSS em geral.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorExampleLearn CSS tutorial
Type selectorh1 {  }Type selectors
Universal selector* {  }The universal selector
Class selector.box {  }Class selectors
id selector#unique { }ID selectors
Attribute selectora[title] {  }Attribute selectors
Pseudo-class selectorsp:first-child { }Pseudo-classes
Pseudo-element selectorsp::first-line { }Pseudo-elements
Descendant combinatorarticle pDescendant combinator
Child combinatorarticle > pChild combinator
Adjacent sibling combinatorh1 + pAdjacent sibling
General sibling combinatorh1 ~ pGeneral sibling
+ +

In this module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
-- cgit v1.2.3-54-g00ecf