4

I'd like to write a css rule that would use different quotation marks for quotes in different languages. I know that lang is an HTML attribute, so why I can't use the css attribute selector below? Shouldn't the code below target all q and blockqutote elements that are inside an element with lang attribute that has sk value?

[lang=sk] q,
[lang=sk] blockquote {
    quotes: "-" "-";
}

I know the following code works, but I don't quite understand why the code above doesn't. This example uses pseudo class instead, which is not very intuitive for me. The reason probably is that lang is an html attribute at the same time, which is sort of confusing for me.

:lang(sk) q,
:lang(sk) blockquote {
    quotes: "-" "-";
}

Thanks in advance for clearing this up for me.

Peter
  • 419
  • 4
  • 14
  • could you provide an example where the code using attribute selectors fails? – Danield Feb 28 '16 at 12:03
  • Oh, now it works fine. I don't know what went wrong before, my code probably didn't get saved for some reason. This question probably needs to be deleted, as the code above works perfectly fine. – Peter Feb 28 '16 at 12:10

1 Answers1

5

:lang(x) is closer to [lang|=x] than [lang=x] but still they differ because :lang refers to the content rather than the element. The clearest way way to describe the difference is by the example in the CSS spec:

Note the difference between [lang|=xx] and :lang(xx). In this HTML example, only the BODY matches [lang|=fr] (because it has a LANG attribute) but both the BODY and the P match :lang(fr) (because both are in French).

<body lang=fr>
  <p>Je suis Français.</p>
</body>
Alohci
  • 78,296
  • 16
  • 112
  • 156
  • 1
    Could you give an example to demonstrate the difference? – Danield Feb 28 '16 at 12:19
  • 2
    Ok I see - here's [a demo](http://codepen.io/danield770/pen/QNWBWE?editors=1100) - when using `:lang` each child gets the border – Danield Feb 28 '16 at 12:35
  • @Danield: Is `:lang` the same thing as `*:lang`? I'm still slightly confused by the syntax because I was taught that pseudo selectors are used to target elements that are in a certain state. The confusing part for me is that there is nothing before `:`. – Peter Feb 28 '16 at 16:06
  • 1
    @Peter - Yes `:lang` and `*:lang` are identical. Specifically under [5.3 Universal selector](https://drafts.csswg.org/css2/selector.html#universal-selector) the spec says "If the universal selector is not the only component of a simple selector, the "*" may be omitted." – Alohci Feb 28 '16 at 16:23
  • 1
    @Alohci: Then `:lang(sk) q` doesn't make much sense, does it? It should be `q:lang(sk)` if I only want to target `q` tags in `sk` language, right? – Peter Feb 28 '16 at 16:55
  • @Peter - right, because `:lang(sk) q` would match the q element in `
    Ahoj Hello
    ` but `q:lang(sk)` wouldn't.     – Alohci Feb 28 '16 at 17:03
  • @Alohci by any chance do you know **why** the `:lang` selector works this way? http://stackoverflow.com/q/35684742/703717 – Danield Feb 29 '16 at 10:29
  • @Danield - I don't really. A guess might be to do with the way pseudo-classes represent element *states*, not properties or attributes, and that to expose the lang state to the accessibility api correctly, it needs to be propagated to each descendent element. But that's just speculation. – Alohci Feb 29 '16 at 12:32