Skip to main content

Css :has Example


The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element.

/* Selects any <a>, as long as it has an <img> element directly inside it  */
/* Note that this is not supported in any browser yet */
let test = document.querySelector('a:has(> img)');

Syntax


:has( <relative-selector-list> )
where 
<relative-selector-list> = <relative-selector>#
where 
<relative-selector> = <combinator>? <complex-selector>
where 
<combinator> = '>' | '+' | '~' | [ '||' ]
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*
where 
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
where 
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'
where 
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]?  | 
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'
where 
<attr-matcher> = [ '~' |  |  | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

Description


The :has() pseudo-class takes a relative selector list as an argument. In earlier revisions of the CSS Selectors Level 4 specification, :has had a limitation that it couldn't be used within stylesheets. Instead, it could only be used with functions like document.querySelector(); this was due to performance concerns. This limitation has been removed because no browser implemented it that way. Instead, browsers currently only support the use of :has() within stylesheets.


Examples


Matching <a> elements that directly contain an <img>


The following selector matches only <a> elements that directly contain an <img> child:

a:has(> img)

Matching <h1> elements that are followed by a <p>


The following selector matches <h1> elements only if they have a <p> element directly following them:

h1:has(+ p)

Specifications


Specification Status Comment
Selectors Level 4
The definition of ':has()' in that specification.		 Working Draft Initial definition

Browser compatibility








































DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
:has
No



No



No


No
No
No
No
No

No


No
No
No

See also




Comments

Post a Comment

Popular posts from this blog

530 Valid Hostname Is Expected When Setting Up IIS 10 For Multiple Sites

Answer : Solution 1: When configured with two or more hostnames, the correct virtual host name and username must both be sent in the username by the ftp client. Separate the site name and user with the vertical line symbol: | www.example.com|MyUser So, in your FTP Client use this for the username: ftp.telefonievergelijken.nl|tv_ftp Solution 2: It appears that you're attempting to connect to the FTP site using a hostname which is not currently configured in any of the bindings to the FTP site within IIS. I base this only on the error output from Filezilla which you have included, as you have censored the hostname (even in example form) from the output, so there isn't much more to go on. You'll need to configure a binding on the FTP site which matches the hostname you are using to connect to the FTP site (whether that be from Filezilla or any other FTP client). EDIT: From your updated post information, I notice that your bindings for the FTP site are indeed in...
Read more

C Perror Example

Defined in header <stdio.h> void perror ( const char * s ) ; Prints a textual description of the error code currently stored in the system variable errno to stderr . The description is formed by concatenating the following components: the contents of the null-terminated byte string pointed to by s , followed by ": " (unless s is a null pointer or the character pointed to by s is the null character) implementation-defined error message string describing the error code stored in errno , followed by '\n' . The error message string is identical to the result of strerror ( errno ) . Parameters s - pointer to a null-terminated string with explanatory message Return value (none). Example # include <stdio.h> int main ( void ) { FILE * f = fopen ( "non_existent" , "r" ) ; if ( f == NULL ) { perror ( "fopen() failed" ) ; } else { fclose...
Read more

Converting A String To Int In Groovy

Answer : Use the toInteger() method to convert a String to an Integer , e.g. int value = "99".toInteger() An alternative, which avoids using a deprecated method (see below) is int value = "66" as Integer If you need to check whether the String can be converted before performing the conversion, use String number = "66" if (number.isInteger()) { int value = number as Integer } Deprecation Update In recent versions of Groovy one of the toInteger() methods has been deprecated. The following is taken from org.codehaus.groovy.runtime.StringGroovyMethods in Groovy 2.4.4 /** * Parse a CharSequence into an Integer * * @param self a CharSequence * @return an Integer * @since 1.8.2 */ public static Integer toInteger(CharSequence self) { return Integer.valueOf(self.toString().trim()); } /** * @deprecated Use the CharSequence version * @see #toInteger(CharSequence) */ @Deprecated public static Integer toInteger(String self) { return toInteg...
Read more