{"id":20,"date":"2005-03-27T04:58:31","date_gmt":"2005-03-27T09:58:31","guid":{"rendered":"http:\/\/wahlers.com.br\/claus\/blog\/?p=20"},"modified":"2005-10-28T14:36:03","modified_gmt":"2005-10-28T19:36:03","slug":"css3-selectors","status":"publish","type":"post","link":"http:\/\/wahlers.com.br\/claus\/blog\/css3-selectors\/","title":{"rendered":"CSS3 Selectors"},"content":{"rendered":"

Recently, i continued porting the DENG1 CSS parser to ECMAScript 4 (AS2, to be specific), and making it fully compliant to the CSS3 specification. The current AS1 version of the parser already has many CSS3 features implemented, but not all of them (like the nth-child()<\/code>, nth-last-child()<\/code>, nth-of-type()<\/code> and nth-last-of-type()<\/code> pseudo classes for example, that required a special type of argument that wasn’t supported by the parser yet).<\/p>\n

Part of the work was commenting changes in the grammar, to know what was added or changed from the CSS2.1 grammar, and to verify if the existing code fully conforms to the CSS3 grammar.<\/p>\n

I figured this might be an interesting read for some of you, so here it is. Disclaimer: Please note that the comments might not be accurate or complete. In doubt, please refer directly to the Selectors module<\/a> of the CSS3 specification<\/a> at W3C.<\/p>\n

Commented grammar for CSS3 Selectors Module<\/strong><\/p>\n

It is now specified that only one pseudo element is allowed in a selector, and that this pseudo element has to occur as the very last element. Pseudo classes can occur anywhere in a simple selector sequence.<\/p>\n

\n
selector\r\n  \/* there is at least one sequence of simple selectors *\/\r\n  \/* in a selector and the pseudo-elements occur only *\/\r\n  \/* in the last sequence; only one pseudo-element may *\/\r\n  \/* occur *\/\r\n  : [ simple_selector_sequence combinator ]*\r\n       simple_selector_sequence [ pseudo_element ]?\r\n  ;<\/pre>\n<\/blockquote>\n
New combinators ~<\/code> (indirect adjacent combinator) and *<\/code> (descendant combinator) have been introduced (the *<\/code> combinator is not contained in the current CSS3 grammar though).<\/p>\n
\n
combinator\r\n  \/* combinators can be surrounded by white space *\/\r\n  : S* [ '+' | '>' | '~' | \/* empty *\/ ] S*\r\n  ;<\/pre>\n<\/blockquote>\n
Typeselectors and the universal selector (*<\/code>) have an optional namespace prefix now. Both the typeselector and the universal selector are optional.<\/p>\n
The grammar for negation<\/code> is missing in the current CSS3 grammar, it should look similar to the rule for pseudo_class<\/code>, with a function identifier not()<\/code> and one or more negation_args<\/code> as function argument. The grammar is incomplete here. Example: a:not([href])<\/code>.<\/p>\n
\n
simple_selector_sequence\r\n  \/* the universal selector is optional *\/\r\n  : [ type_selector | universal ]?\r\n        [ HASH | \r\n          class | \r\n          attrib | \r\n          pseudo_class | \r\n          negation ]+ |\r\n    type_selector | universal\r\n  ;\r\n\r\ntype_selector\r\n  : [ namespace_prefix ]? element_name\r\n  ;\r\n\r\nelement_name\r\n  : IDENT\r\n  ;<\/pre>\n<\/blockquote>\n
A namespace prefix, if used, needs a preceding @namespace<\/code> rule, where the namespace prefix is associated with a namespace URL. Let’s assume we want to mix SVG and XHTML markup in the same document. Both SVG and XHTML feature the <a><\/code> element. We most likely want the <a><\/code> element to appear different in the SVG context (i.e. shape appears with a stroke) than in the XHTML context (text appears underlined). <\/p>\n
Using the @namespace<\/code> rule and namespaced prefixes we can write rules that apply either to SVG’s or to XHTML’s <a> element:<\/p>\n
@namespace xhtml url(http:\/\/www.w3.org\/1999\/xhtml);\r\n@namespace svg url(http:\/\/www.w3.org\/2000\/svg);\r\nxhtml|a[href] { text-decoration: underlined; }\r\nsvg|a[href] { stroke-width: 2px; }<\/pre>\n
\n
namespace_prefix\r\n  : [ IDENT | '*' ]? '|'\r\n  ;\r\n\r\nuniversal\r\n  : [ namespace_prefix ]? '*'\r\n  ;\r\n\r\nclass\r\n  : '.' IDENT\r\n  ;<\/pre>\n<\/blockquote>\n
Attribute simple selectors allow an optional namespace prefix for the attribute ident<\/code> now.<\/p>\n
Prefixmatch (^=<\/code>), suffixmatch ($=<\/code>) and substringmatch (*=<\/code>) operators have been introduced.<\/p>\n
Example: we want to style <a><\/code> elements with the href<\/code> attribute set to an URL starting with "http:\/\/wahlers.com.br" differently than other <a><\/code> elements. we are using the prefixmatch operator:<\/p>\n
a[href] {\r\n   font-weight: bold;\r\n}\r\na[href ^= "http:\/\/wahlers.com.br"] {\r\n   font-style: italic;\r\n}<\/pre>\n
All <a><\/code> elements with the href<\/code> attribute set appear bold, <a><\/code> elements with a href<\/code> attribute starting with "http:\/\/wahlers.com.br" appear bold and italic.<\/p>\n
\n
attrib\r\n  : '[' S* [ namespace_prefix ]? IDENT S*\r\n        [ [ PREFIXMATCH |\r\n            SUFFIXMATCH |\r\n            SUBSTRINGMATCH |\r\n            '=' |\r\n            INCLUDES |\r\n            DASHMATCH ] S* [ IDENT | STRING ] S*\r\n        ]? ']'\r\n  ;\r\n\r\npseudo_class\r\n  \/* a pseudo-class is an ident, or a function taking *\/\r\n  \/* an ident or a string or a number or a simple  *\/\r\n  \/* selector (excluding negation and pseudo- *\/\r\n  \/* elements) or a an+b expression for argument *\/\r\n  : ':' [ IDENT | functional_pseudo ]\r\n  ;<\/pre>\n<\/blockquote>\n
"an+b" expressions have been introduced as argument for functional pseudo classes (select nodes depending on their position). Allowed argument types include string<\/code>, number<\/code>, "an+b" expression<\/code> and negation<\/code> now, in addition to ident<\/code> (the only allowed argument type in CSS2.1).<\/p>\n
Example: style even and odd rows of a table differently:<\/p>\n
tr { background-color: #eee; }\r\ntr:nth-child(2n) { background-color: #ccc; }<\/pre>\n
\n
functional_pseudo\r\n  : FUNCTION S* [ IDENT | STRING | NUMBER |\r\n      expression | negation_arg ] S* ')'\r\n  ;\r\n\r\nexpression\r\n  :  [ [ '-' | INTEGER ]? 'n' [ SIGNED_INTEGER ]? ] |\r\n      INTEGER\r\n  ;\r\n\r\nnegation_arg\r\n  : type_selector |\r\n    universal |\r\n    HASH |\r\n    class |\r\n    attrib |\r\n    pseudo_class\r\n  ;<\/pre>\n<\/blockquote>\n
Pseudo elements are now prefixed by ::<\/code> (instead of :<\/code> in CSS2.1) to distinguish between pseudo elements and pseudo classes. For backwards compatibility with CSS2.1 and previous, user agents have to accept the :<\/code> notation for pseudo elements defined in earlier specs (like :before<\/code> and :after<\/code>).<\/p>\n
\n
pseudo_element\r\n  : [ ':' ]? ':' IDENT\r\n  ;<\/pre>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Recently, i continued porting the DENG1 CSS parser to ECMAScript 4, and making it fully compliant to the CSS 3 specification. The current AS1 version of the parser already has many CSS 3 features implemented, but not all of them (like the nth-child(), nth-last-child(), nth-of-type() and nth-last-of-type() pseudo classes for example, that required a special type of argument that wasn’t supported by the parser yet). Part of the work was commenting changes in the grammar, to know what was added or changed from the CSS 2.1 grammar, and to verify if the existing code fully conforms to the CSS 3 grammar. I figured this might be an interesting read for some of you, so here it is… Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-20","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":0,"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"wp:attachment":[{"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}