From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/_colon_only-child/index.html | 197 +++++++++++++++++++++++ 1 file changed, 197 insertions(+) create mode 100644 files/pt-br/web/css/_colon_only-child/index.html (limited to 'files/pt-br/web/css/_colon_only-child') diff --git a/files/pt-br/web/css/_colon_only-child/index.html b/files/pt-br/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..827a539455 --- /dev/null +++ b/files/pt-br/web/css/_colon_only-child/index.html @@ -0,0 +1,197 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - Pseudo-classe + - Referencia +translation_of: 'Web/CSS/:only-child' +--- +
{{CSSRef}}
+ +

A pseudo-classe de CSS :only-child representa um elemento sem nenhum elemento-irmão. É o mesmo que :first-child:last-child ou :nth-child(1):nth-last-child(1), mas com uma especificidade mais baixa.

+ +
/* Seleciona cada <p>, mas apenas se for o */
+/* único filho de seu elemento-pai */
+p:only-child {
+  background-color: lime;
+}
+ +
+

Nota: Originalmente, foi definido que o elemento selecionado deveria ter um elemento-pai. A partir de Selectors Level 4, isso não é mais necessário.

+
+ +

Sintaxe

+ +
{{csssyntax}}
+
+ +

Exemplos

+ +

Exemplo básico

+ +

HTML

+ +
<main>
+  <div>
+    <i>Eu sou um filho único solitário.</i>
+  </div>
+
+  <div>
+    <i>Eu tenho irmãos.</i><br>
+    <b>Eu também!</b><br>
+    <span>Eu também tenho irmãos, <span>mas este é um filho único.</span></span>
+  </div>
+</main>
+ +

CSS

+ +
main :only-child {
+  color: red;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Basic_example','100%',180)}}

+ +

Exemplo de lista

+ +

HTML

+ +
<ol>
+  <li>Primeiro
+    <ul>
+      <li>Essa lista tem apenas um elemento.
+    </ul>
+  </li>
+  <li>Segundo
+    <ul>
+      <li>Essa lista tem três elementos.
+      <li>Essa lista tem três elementos.
+      <li>Essa lista tem três elementos.
+    </ul>
+  </li>
+<ol>
+
+ +

CSS

+ +
li li {
+  list-style-type: disc;
+}
+li:only-child {
+  color: red;
+  list-style-type: square;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('A_list_example', '100%', 210)}}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS4 Selectors')}}Não é necessário que os elementos selecionados tenham um elemento-pai.
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS3 Selectors')}}Definição inicial.
+ +

Compatibilidade de browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico2{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.8)}}9{{CompatOpera(9.5)}}3.1
Elemento-pai não é necessário{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.8)}}9{{CompatOperaMobile(10)}}3.1
Elemento-pai não é necessário{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
+
+ +

Ver também

+ + -- cgit v1.2.3-54-g00ecf