diff options
Diffstat (limited to 'files/ca/web/css/_colon_not/index.html')
| -rw-r--r-- | files/ca/web/css/_colon_not/index.html | 176 |
1 files changed, 176 insertions, 0 deletions
diff --git a/files/ca/web/css/_colon_not/index.html b/files/ca/web/css/_colon_not/index.html new file mode 100644 index 0000000000..2c0171e00b --- /dev/null +++ b/files/ca/web/css/_colon_not/index.html @@ -0,0 +1,176 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:not' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:not()</code></strong> representa elements que no coincideixen amb una llista de selectors. Atès que impedeix que es seleccionin elements específics, es coneix com a <em>pseudo-class de negació</em>.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona qualsevol element que NO sigui un paràgraf */ +:not(p) { + color: blue; +}</pre> + +<div class="note"> +<p><strong>Notes:</strong></p> + +<ul> + <li>Els selectors inútils es poden escriure utilitzant aquesta pseudo-class. Per exemple, <code>:not(*)</code> coincideix amb qualsevol element que no sigui un element, de manera que mai no s'aplicarà la regla</li> + <li>Aquesta pseudo-class pot augmentar l'<a href="/en-US/docs/Web/CSS/Specificity">especificitat</a> d'una regla. Per exemple, <code>#foo:not(#bar)</code> coincidirà amb el mateix element <code>#foo</code>, més senzill, però té una especificitat més alta.</li> + <li><code>:not(.foo)</code> coincidirà amb qualsevol cosa que no sigui <code>.foo</code>, <em>incoent {{HTMLElement("html")}} i {{HTMLElement("body")}}.</em></li> + <li>Aquest selector només s'aplica a un element; no es pot utilitzar per excloure a tots els ancestres. Per exemple, <code>body :not(table) </code>s'aplicarà als enllaços dins d'una taula, ja que {{HTMLElement("tr")}} coincidirà amb la part <code>:not()</code> del selector.</li> +</ul> +</div> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<p>La pseudo-class <code>:not()</code> requereix una llista separada per comes d'un o més selectors com a argument. La llista no ha de contenir un altre selector de negació o un <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a>.</p> + +<div class="warning"> +<p>La capacitat d'enumerar més d'un selector és experimental i encara no està àmpliament suportada.</p> +</div> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>I am a paragraph.</p> +<p class="fancy">I am so very fancy!</p> +<div>I am NOT a paragraph.</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.fancy { + text-shadow: 2px 2px 3px gold; +} + +/* <p> elements that are not in the class `.fancy` */ +p:not(.fancy) { + color: green; +} + +/* Elements that are not <p> elements */ +body :not(p) { + text-decoration: underline; +} + +/* Elements that are not <div> or <span> elements */ +body :not(div):not(span) { + font-weight: bold; +} + +/* Elements that are not `.crazy` or `.fancy` */ +/* Note that this syntax is not well supported yet. */ +body :not(.crazy, .fancy) { + font-family: sans-serif; +}</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<h2 id="Especificacions">Especificacions</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificació</th> + <th scope="col">Estat</th> + <th scope="col">Comentari</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#negation', ':not()') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Estén el seu argument per permetre a alguns selectors no simples.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#negation', ':not()') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadors compatibles</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.2</td> + </tr> + <tr> + <td>Arguments estesos</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>9.0</td> + <td>10.0</td> + <td>3.2</td> + </tr> + <tr> + <td>Arguments estesos</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9.0</td> + </tr> + </tbody> +</table> +</div> |