diff options
Diffstat (limited to 'files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html')
| -rw-r--r-- | files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html | 430 |
1 files changed, 430 insertions, 0 deletions
diff --git a/files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html b/files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..3870c68936 --- /dev/null +++ b/files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,430 @@ +--- +title: Seletores +slug: Web/CSS/Getting_Started/Seletores +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}<span class="seoSummary">Esta é a 5ª seção de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">Primeiros passos (Tutorial Css)</a>, ela explica como você pode aplicar estilos seletivamente e como diferentes tipos de seletores possuem diferentes prioridades. Você adiciona mais atributos para tags no seu documento e como você pode usa-los em sua folha de estilos.</span></p> + +<h2 class="clearLeft" id="Informações_Seletores">Informações: Seletores</h2> + +<p>CSS tem sua propria terminologia para descrever a linguagem CSS. Anteriormente nesse tutorial, você criou linha no seu stylesheet como esta:</p> + +<pre class="brush: css">strong { + color: red; +} +</pre> + +<p>No CSS, este código inteiro é uma <em>regra</em>. Esta regra inicia com <code>strong</code>, que é um <em>seletor</em>. Ele seleciona os elementos do DOM aos quais a regra se aplica.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mais detalhes</div> + +<p>A parte dentro das chaves é a <em>declaração</em>.</p> + +<p>A palavra-chave <code>color</code> é uma <em>propriedade e</em> <code>red</code> é um <em>valor</em>.</p> + +<p>O ponto e vírgula depois do par propriedade-valor o separa de outros pares propriedade-valor na mesma declaração.</p> + +<p>Esse tutorial se refere ao seletor <code>strong</code> como um seletor de <em>tag</em>. A Especificação do CSS se refere a este seletor como seletor de <em>tipo</em>.</p> +</div> + +<p>Esta página de tutorial explica mais sobre os seletores que você pode utilizar nas regras CSS.</p> + +<p>Em adição aos nomes das tags, você pode usar valores de atributos nos seletores. Isso permite que as regras sejam mais específicas.</p> + +<p>Dois atributos são especiais para o CSS. São eles o <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> e o <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p> + +<h3 id="Seletores_com_Classe">Seletores com Classe</h3> + +<p>Use o atributo <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> em um elemento para atribuir o elemento a uma determinada classe. O nome da classe é de sua escolha. Muitos elementos em um documento podem pertencer a mesma classe.</p> + +<p>Em seu CSS, digite um ponto final antes do nome da classe para usar como um seletor.</p> + +<h3 id="Seletores_com_ID">Seletores com ID</h3> + +<p>Use o atributo <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> em um elemento para atribuir um ID a esse elemento. O nome do ID é de sua escolha e ele deve ser único no documento.</p> + +<p>Em seu CSS, digite cerquilha <strong>(#)</strong> antes do ID quanto estiver usando em um seletor ID.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemplo</div> +Esta tag HTML tem tanto um atributo <code>class</code> quanto um atributo <code>id</code>: + +<pre class="brush: html"><p class="chave" id="principal"> +</pre> + +<p>O valor de <strong>id</strong>, <code>principal</code>, precisa ser unico no documento, mas outras tags no documento podem ter o atributo <strong>class</strong> com o mesmo nome, <code>chave</code>.</p> + +<p>Em uma folha de estilo CSS, esta regra torna verde todos os elementos da classe <code>chave</code>. (Eles podem ou não serem elementos {{ HTMLElement("p") }}.)</p> + +<pre class="brush: css">.chave { + color: green; +} +</pre> + +<p>Esta regra torna negrito um elemento com <strong>id</strong> <code>principal</code>:</p> + +<pre class="brush: css">#principal { + font-weight: bolder; +} +</pre> +</div> + +<h3 id="Seletores_de_Atributo">Seletores de Atributo</h3> + +<p>Você não está restrito aos dois atributos especiais, class e id. Você pode especificar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors">outros atributos</a> usando colchetes. Dentro dos colchetes você insere o nome do atributo, opcionalmente seguido por um operador correspondente e um valor. Além disso, a seleção pode ser feita case-insensitive adicionando um "i" depois do valor, mas nem todos os browsers suportam esta funcionalidade ainda. Exemplos:</p> + +<dl> + <dt><code>[disabled]</code></dt> + <dd>Seleciona todos os elementos com o atributo "disabled".</dd> + <dt><code>[type='button']</code></dt> + <dd>Seleciona todos os elementos do tipo "button".</dd> + <dt><code>[class~=key]</code></dt> + <dd><font><font>Seleciona elementos com a classe "key" (mas não ex: "keyed", "monkey", "buckeye"). </font><font>Funcionalmente equivalente a </font></font><code>.key</code><font><font>.</font></font></dd> + <dt><code>[lang|=es]</code></dt> + <dd>Selects elements specified as Spanish. This includes "es" and "es-MX" but not "eu-ES" (which is Basque).</dd> + <dt>[title*="example" i]</dt> + <dd><font>Seleciona elementos cujo título contém "exemplo", ignorando maiúsculas e minúsculas. </font><font>Nos navegadores que não suportam o sinalizador "i", esse seletor provavelmente não corresponderá a nenhum elemento.</font></dd> + <dt><code>a[href^="https://"]</code></dt> + <dd>Seleciona links seguros.</dd> + <dt><code>img[src$=".png"]</code></dt> + <dd>IIndiretamente seleciona imagens PNG; qualquer imagem que seja PNG mas que a URL não termine em ".png" (como quando elas são uma query string) não serão selecionadas.</dd> +</dl> + +<h3 id="Seletores_de_pseudo-classes">Seletores de pseudo-classes</h3> + +<p><font><font>Uma </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" title="pt-BR / docs / Web / Guide / CSS / Pseudo-classes"><font><font>pseudo-classe</font></font></a><font><font> em CSS </font><font>é uma palavra-chave adicionada aos seletores que especifica um estado especial do elemento a ser selecionado. </font><font>Por exemplo </font></font> {{ Cssxref(":hover") }}, aplicará um estilo quando o usuário passar o mouse sobre o elemento especificado pelo seletor.</p> + +<p>Pseudo-classes, juntas com pseudo-elementos, te deixa aplicar um estilo para um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação à fatores externos como o histórico do navegador ({{ cssxref(":visited") }}, por exemplo), o estado do conteúdo (como {{ cssxref(":checked") }} no mesmo elemento do formulário), ou a posição do mouse (como {{ cssxref(":hover") }} que te permite saber se o mouse está sobre um elemento ou não). Para ver uma lista completa de seletores, visite <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p> + +<div class="tuto_example"> +<div class="tuto_type">Syntax</div> + +<pre class="brush:css">selector:pseudo-class { + property: value; +} +</pre> +</div> + +<h4 id="Lista_de_pseudo-classes">Lista de pseudo-classes</h4> + +<ul> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":visited") }}</li> + <li>{{ Cssxref(":active") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":last-child") }}</li> + <li>{{ Cssxref(":nth-child") }}</li> + <li>{{ Cssxref(":nth-last-child") }}</li> + <li>{{ Cssxref(":nth-of-type") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":disabled") }}</li> +</ul> + +<h2 id="Informação_Especificidade">Informação: Especificidade</h2> + +<p>Várias regras podem ter seletores que correspondem ao mesmo elemento. Se uma propriedade recebeu apenas uma regra, não há conflito e a propriedade será definida ao elemento. Se são aplicadas mais do que uma regra a um elemento e definido a mesma propriedade, então o CSS dará prioridade à regra que tem o seletor mais <a href="/en-US/docs/Web/CSS/Specificity">específico</a>. Um seletor ID é mais específico do que um seletor de classe, pseudo-classe ou atributo, que por sua vez é mais específico do que um de tag ou de pseudo-elemento.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mais detalhes</div> + +<p>Você também pode combinar seletores, fazendo um seletor mais específico. Por exemplo, o seletor <code>.key</code> seleciona todos os elementos que têm a classe com o nome <code>key</code>. O seletor <code>p.key</code> seleciona só os elementos {{ HTMLElement("p") }} nomeados com a classe <code>key</code>.</p> +</div> + +<p>Se a folha de estilo possui regras conflitantes e elas são igualmente específicas, então o CSS dará prioridade à regra que é posterior na folha de estilo.</p> + +<p>Quando você tem um problema com regras conflitantes, tente resolvê-los tornando uma das regras mais específicas, para que ela seja priorizada. Se você não pode fazer isto, tente mover uma das regras perto do fim da folha de estilo e então ela será priorizada.</p> + +<h2 id="Information_Selectors_based_on_relationships">Information: Selectors based on relationships</h2> + +<p>CSS has some ways to select elements based on the relationships between elements. You can use these to make selectors that are more specific.</p> + +<table id="relselectors"> + <caption>Common selectors based on relationships</caption> + <tbody> + <tr> + <td style="width: 10em;"><strong>Selector</strong></td> + <td><strong>Selects</strong></td> + </tr> + <tr> + <td><code>A E</code></td> + <td>Any E element that is a <em>descendant</em> of an A element (that is: a child, or a child of a child, <em>etc</em>.)</td> + </tr> + <tr> + <td><code>A > E</code></td> + <td>Any E element that is a <em>child</em> (i.e. direct descendant) of an A element</td> + </tr> + <tr> + <td><code>E:first-child</code></td> + <td>Any E element that is the <em>first child</em> of its parent</td> + </tr> + <tr> + <td><code>B + E</code></td> + <td>Any E element that is the next <em>sibling</em> of a B element (that is: the next child of the same parent)</td> + </tr> + </tbody> +</table> + +<p>You can combine these to express complex relationships.</p> + +<p>You can also use the symbol <code>*</code> (asterisk) to mean "any element".</p> + +<div class="tuto_example"> +<div class="tuto_type">Example</div> + +<p>An HTML table has an <code>id</code> attribute, but its rows and cells do not have individual identifiers:</p> + +<pre class="brush: html"><table id="data-table-1"> +... +<tr> +<td>Prefix</td> +<td>0001</td> +<td>default</td> +</tr> +... +</pre> + +<p>These rules make the first cell in each row underline, and the sibling of first cell in each row strikethroughted (in example 2.nd cell) . They only affect one specific table in the document:</p> + +<pre class="brush:css"> #data-table-1 td:first-child {text-decoration: underline;} + #data-table-1 td:first-child + td {text-decoration: line-through;} +</pre> + +<p>The result looks like:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 18em;"> + <tbody> + <tr> + <td><u>Prefix</u></td> + <td><s>0001</s></td> + <td>default</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">More details</div> + +<p>In the usual way, if you make a selector more specific, then you increase its priority.</p> + +<p>If you use these techniques, you avoid the need to specify <code>class</code> or <code>id</code> attributes on so many tags in your document. Instead, CSS does the work.</p> + +<p>In large designs where speed is important, you can make your stylesheets more efficient by avoiding complex rules that depend on relationships between elements.</p> + +<p>For more examples about tables, see <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> in the CSS Reference page.</p> +</div> + +<h2 id="Action_Using_class_and_ID_selectors">Action: Using class and ID selectors</h2> + +<ol> + <li>Edit your HTML file, and duplicate the paragraph by copying and pasting it.</li> + <li>Then add <strong>id</strong> and <strong>class</strong> attributes to the first copy, and an <strong>id</strong> attribute to the second copy as shown below. Alternatively, copy and paste the entire file again: + <pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p id="first"> + <strong class="carrot">C</strong>ascading + <strong class="spinach">S</strong>tyle + <strong class="spinach">S</strong>heets + </p> + <p id="second"> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li>Now edit your CSS file. Replace the entire contents with: + <pre class="brush:css">strong { color: red; } +.carrot { color: orange; } +.spinach { color: green; } +#first { font-style: italic; } +</pre> + </li> + <li>Save the files and refresh your browser to see the result: + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + + <p>You can try rearranging the lines in your CSS file to show that the order has no effect.</p> + + <p>The class selectors <code>.carrot</code> and <code>.spinach</code> have priority over the tag selector <code>strong</code>.</p> + + <p>The ID selector <code>#first</code> has priority over the class and tag selectors.</p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Challenges</div> + +<ol> + <li>Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters that same color as they are now, but makes all the other text in the second paragraph blue: + <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + <li>Now change the rule you have just added (without changing anything else), to make the first paragraph blue too: + <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<ol> + <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below: + + <pre class="brush: css">#second { color: blue; } +</pre> + A more specific selector, <code>p#second</code> also works.</li> + <li>Change the selector of the new rule to be a tag selector using <code>p</code>: + <pre class="brush: css">p { color: blue; } +</pre> + </li> +</ol> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> + +<h2 id="Action_Using_pseudo-classes_selectors">Action: Using pseudo-classes selectors</h2> + +<ol> + <li>Create an HTML file with following content: + <pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> + </body> +</html> +</pre> + </li> + <li>Now edit your CSS file. Replace the entire contents with: + <pre class="brush: css">a.homepage:link, a.homepage:visited { + padding: 1px 10px 1px 10px; + color: #fff; + background: #555; + border-radius: 3px; + border: 1px outset rgba(50,50,50,.5); + font-family: georgia, serif; + font-size: 14px; + font-style: italic; + text-decoration: none; +} + +a.homepage:hover, a.homepage:focus, a.homepage:active { + background-color: #666; +} +</pre> + </li> + <li>Save the files and refresh your browser to see the result (put the mouse over the following link to see the effect): + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td> + </tr> + </tbody> + </table> + </li> +</ol> + +<h2 id="Action_Using_selectors_based_on_relationships_and_pseudo-classes">Action: Using selectors based on relationships and pseudo-classes</h2> + +<p>With selectors based on relationships and pseudo-classes you can create complex cascade algorithms. This is a common technique used, for example, in order to create <strong>pure-CSS dropdown menus</strong> (that is only CSS, without using <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript</a>). The essence of this technique is the creation of a rule like the following:</p> + +<pre class="brush: css">div.menu-bar ul ul { + display: none; +} + +div.menu-bar li:hover > ul { + display: block; +}</pre> + +<p>to be applied to an HTML structure like the following:</p> + +<pre class="brush: html"><div class="menu-bar"> + <ul> + <li> + <a href="example.html">Menu</a> + <ul> + <li> + <a href="example.html">Link</a> + </li> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + </ul> + </li> + </ul> +</div> +</pre> + +<p>See our complete <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> for a possible cue.</p> + +<h2 id="What_next">What next?</h2> + +<p>Your sample stylesheet is starting to look dense and complicated. The next section describes ways to make CSS <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a>.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p> |