W3C home > Mailing lists > Public > www-style@w3.org > April 2011

Re: Specificity and conflicting selectors

From: Bjoern Hoehrmann <derhoermi@gmx.net>
Date: Fri, 15 Apr 2011 16:14:53 +0200
To: <Yael.Aharon@nokia.com>
Cc: <www-style@w3.org>
Message-ID: <n3kgq61mcc1bvdkmnuh79drpjkg5vpgm4m@hive.bjoern.hoehrmann.de>
* <Yael.Aharon@nokia.com> wrote:
>I have a question about how to handle selectors that have conflicting meaning.
>The background for this question is a webkit bug https://bugs.webkit.org/show_bug.cgi?id=52511 .
>In that bug, the "right" selector has a higher specificity than the "left"
>selector, yet all major browsers ignore the "right" selector and display the
>image on the left side.


  #comments img {
    position: absolute;
    left: 10px;
  .rtl #comments img {
    right: 10px;

The img ends up with

    position: absolute;
    left: 10px;
    right: 10px;

As both selectors match the img element. The commenter seems to expect
the `left: 10px;` to be ignored (so it is treated like `left: auto;`),
but that is conflict with expecting absolute positioning to occur, as
if `left: 10px;` is ignored then `position: absolute;` would be ignored
aswell, so I don't understand the confusion there.

What it means to specify both 'left' and 'right' with values other than
`auto` is defined in the CSS specifications. Note that 'left', 'right',
and 'position' are property names, `#comments img` would be a selector.
"Specifity" is something selectors have, but properties do not have that
as well-defined concept.
Björn Höhrmann · mailto:bjoern@hoehrmann.de · http://bjoern.hoehrmann.de
Am Badedeich 7 · Telefon: +49(0)160/4415681 · http://www.bjoernsworld.de
25899 Dagebüll · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ 
Received on Friday, 15 April 2011 14:15:23 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:45 UTC