From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/ca/web/css/_colon_focus-within/index.html | 146 ++++++++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 files/ca/web/css/_colon_focus-within/index.html (limited to 'files/ca/web/css/_colon_focus-within') diff --git a/files/ca/web/css/_colon_focus-within/index.html b/files/ca/web/css/_colon_focus-within/index.html new file mode 100644 index 0000000000..ae6393853d --- /dev/null +++ b/files/ca/web/css/_colon_focus-within/index.html @@ -0,0 +1,146 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:focus-within' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :focus-within representa un element que ha rebut focus o conté un element que ha rebut focus. En altres paraules, representa un element que està aparellat amb la pseudo-class {{cssxref(":focus")}} o té un descendent que està aparellat amb :focus. (Això inclou descendents en arbres d'ombres.)

+ +
/* Selecciona un <div> quan un dels seus descendents està enfocat */
+div:focus-within {
+  background: cyan;
+}
+ +

Aquest selector és útil, per fer un exemple comú, per a ressaltar un contenidor complet {{htmlElement("form")}} quan l'usuari se centra en un dels seus camps {{htmlElement("input")}}.

+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

En aquest exemple, el formulari rebrà estils de color especials quan l'entrada de text rep el focus.

+ +

HTML

+ +
<p>Try typing into this form.</p>
+
+<form>
+  <label for="given_name">Given Name:</label>
+  <input id="given_name" type="text">
+  <br>
+  <label for="family_name">Family Name:</label>
+  <input id="family_name" type="text">
+</form>
+ +

CSS

+ +
form {
+  border: 1px solid;
+  color: gray;
+  padding: 4px;
+}
+
+form:focus-within {
+  background: #ff8;
+  color: black;
+}
+
+input {
+  margin: 4px;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 500, 150)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}{{Spec2("CSS4 Selectors")}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("60")}}{{CompatNo}}[1]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}{{CompatOpera("47")}}10.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatChrome("60")}}{{CompatChrome("60")}}{{CompatGeckoMobile("52.0")}}[2]{{CompatNo}}{{CompatOpera("47")}}10.3
+
+ +

[1] Aquesta característica encara no està implementada. Consulteu la sol·licitud de millora relacionada.

+ +

[2] Aquesta característica es va implementar al {{bug("1176997")}}.

+ +

Vegeu també

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