Re: [csswg-drafts] [selectors4] Name the “functional pseudo-class like :matches() with 0 specificity”

I feel like we should probably add real-world examples and see how they fare with the most common proposals:

Use case 1: specificity tweaks
```css
textarea, input:if([type=text], [type=number], [type=email]) {
   /* default text box styling, with tag specificity */
   /* overridden by a css class, unlike what would happen without the no-specificity attribute check */
}

a:if([href^="http"]) {
    /* external link default style */
    /* does not override any 'a:hover' style defined before */
}

:any-link:if(:not(:hover):not(:active):not(:focus)) {
   /* by default, links have no own color */
   color: inherit; outline: none;
}
svg|a:any-link {
    /* however this shouldn't be true for svg links, and this rule overrides the previous one */
    color: blue;
}
```
vs
```css
textarea, input:where([type=text], [type=number], [type=email]) {
   /* default text box styling, with tag specificity */
   /* overridden by a css class, unlike what would happen without the no-specificity attribute check */
}

a:where([href^="http"]) {
    /* external link default style */
    /* does not override any 'a:hover' style defined before */
}

:any-link:where(:not(:hover):not(:active):not(:focus)) {
   /* by default, links have no own color */
   color: inherit; outline: none;
}
svg|a:any-link {
    /* however this shouldn't be true for svg links, and this rule overrides the previous one */
    color: blue;
}
```


Use case 2: opting out of specificity entirely
```
:if(.class1) { … }
:if(.class1.class1--optionA) { … }
:if(.class2) { … } /* overrides .class1.class1-optionA style */
:if(.class2.class2--optionA) { … }
:if(.class2.class2--optionB) { … }
```
vs
```
:where(.class1) { … }
:where(.class1.class1--optionA) { … }
:where(.class2) { … } /* overrides .class1.class1-optionA style */
:where(.class2.class2--optionA) { … }
:where(.class2.class2--optionB) { … }
```



-- 
GitHub Notification of comment by FremyCompany
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2143#issuecomment-403255004 using your GitHub account

Received on Sunday, 8 July 2018 01:36:51 UTC