[selectors] Element style selectors

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.

Received on Wednesday, 3 February 2016 10:28:00 UTC