Re: [selectors] Element style selectors

On Tue, Feb 2, 2016 at 5:55 AM, Тирдатов Макс <maxtirdatov@ya.ru> wrote:
> Hello everybody,
>
> I'd like if there was the [style.property=value] selector in CSS. It's very similar to the [attribute=value] syntax, but it works with CSS properties defined by any of style attributes, style tags or external CSS files. Here are some examples:
>
> #el1 {
>     border: 1px solid black;
> }
> #el2 {
>     border: 10px dotted red;
> }
> #el3 {
>     border: 3px solid #000000;
> }
> #el4 {
>     border: solid rgba(0,0,0,0);
> }
> #el5 {
>     border: none;
> }
> [style.border] {
>     /* represents #el1, #el2, #el3
>     and #el4 which does have border even though we can't see it
>     but not #el5 because it actually has no border
>     even though the border property is set */
> }
> :not([style.border]) /* or [style.border="none"] */ {
>     /* represents #el5 but not #el1, #el2, #el3, #el4 */
> }
> [style.border-style="solid"] {
>     /* represents #el1, #el3 and #el4 */
> }
> [style.borde="solid"] {
>     /* It's a moot point what this must represent.
>     border:solid; evaluates to border:medium solid black;
>     And if this works here only #el3 must be represented.
>     But most people would expect it to select all elements
>     with solid border of any color and width
>     i.e. #el1, #el3 and #el4 in our case */
> }
>
> It's important that value isn't just a string. If it were, we would have such a problem:
>
> [style.border="10px dotted #FF0000"] {
>     /* It would represent nothing
>     because the original value string is "10px dotted red".
>     But red evaluates to #FF0000 so #el2 actually must be selected */
> }
>
> Also that's the reason there shouldn't be anything like [style.property^=value], [style.property$=value] and so on.
>
> One more remark: if use not the "style" keyword but, for example, "CSS", we can also apply such a selector:
>
> [CSS] {
>     /* represents all the elements that have styling
>     but yet doesn't select such elements as #el5
>     whose properties are set to default values by user */
> }
>
> that we can't apply with "style" because it's also an attribute's name.

In general, we can't have selectors that are evaluated based on
styles, because those trivially create cycles.  For example:

:not([style.border]) {
  border: thin dotted red;
}
[style.border] {
  border: none;
}

In this example, do elements have a border or not? Whichever answer
you pick, you're wrong, because your choice will activate a rule and
switch to the opposite behavior.

You can write a (fragile) selector based on the style attribute
specifically, like [style*="border:"] (which selects any element whose
style attribute contains the substring "border:", which'll usually
only show up if the style attribute is setting the border property),
because that's based on the data in the HTML DOM, which can't be
affected by CSS.  If you have another rule override that and set
border:none, the style attribute is unchanged and the rule still
matches, so there's no cycles introduced.  But having selectors based
on the actual style of the element is impossible, unfortunately.

~TJ

Received on Thursday, 11 February 2016 00:07:03 UTC