Cascading Style Sheet (CSS) Tutorial ( SYNTAX )

rules_in_xml

10.1. Grammar

The grammar below defines the syntax of Selectors. It is globally LL(1) and can be locally LL(2) (but note that most UAs should not use it directly, since it doesn’t express the parsing conventions). The format of the productions is optimized for human consumption and some shorthand notations beyond Yacc (see [YACC]) are used:

  • *: 0 or more
  • +: 1 or more
  • ?: 0 or 1
  • |: separates alternatives
  • [ ]: grouping

The productions are:

selectors_group
  : selector [ COMMA S* selector ]*
  ;

selector
  : simple_selector_sequence [ combinator simple_selector_sequence ]*
  ;

combinator
  /* combinators can be surrounded by whitespace */
  : PLUS S* | GREATER S* | TILDE S* | S+
  ;

simple_selector_sequence
  : [ type_selector | universal ]
    [ HASH | class | attrib | pseudo | negation ]*
  | [ HASH | class | attrib | pseudo | negation ]+
  ;

type_selector
  : [ namespace_prefix ]? element_name
  ;

namespace_prefix
  : [ IDENT | '*' ]? '|'
  ;

element_name
  : IDENT
  ;

universal
  : [ namespace_prefix ]? '*'
  ;

class
  : '.' IDENT
  ;

attrib
  : '[' S* [ namespace_prefix ]? IDENT S*
        [ [ PREFIXMATCH |
            SUFFIXMATCH |
            SUBSTRINGMATCH |
            '=' |
            INCLUDES |
            DASHMATCH ] S* [ IDENT | STRING ] S*
        ]? ']'
  ;

pseudo
  /* '::' starts a pseudo-element, ':' a pseudo-class */
  /* Exceptions: :first-line, :first-letter, :before and :after. */
  /* Note that pseudo-elements are restricted to one per selector and */
  /* occur only in the last simple_selector_sequence. */
  : ':' ':'? [ IDENT | functional_pseudo ]
  ;

functional_pseudo
  : FUNCTION S* expression ')'
  ;

expression
  /* In CSS3, the expressions are identifiers, strings, */
  /* or of the form "an+b" */
  : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+
  ;

negation
  : NOT S* negation_arg S* ')'
  ;

negation_arg
  : type_selector | universal | HASH | class | attrib | pseudo
  ;

10.2. Lexical scanner

The following is the tokenizer, written in Flex (see [FLEX]) notation. The tokenizer is case-insensitive.

The two occurrences of “\377” represent the highest character number that current versions of Flex can deal with (decimal 255). They should be read as “\4177777” (decimal 1114111), which is the highest possible code point in Unicode/ISO-10646. [UNICODE]

%option case-insensitive

ident     [-]?{nmstart}{nmchar}*
name      {nmchar}+
nmstart   [_a-z]|{nonascii}|{escape}
nonascii  [^-\177]
unicode   \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
escape    {unicode}|\\[^\n\r\f0-9a-f]
nmchar    [_a-z0-9-]|{nonascii}|{escape}
num       [0-9]+|[0-9]*\.[0-9]+
string    {string1}|{string2}
string1   \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\"
string2   \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\'
invalid   {invalid1}|{invalid2}
invalid1  \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*
invalid2  \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*
nl        \n|\r\n|\r|\f
w         [ \t\r\n\f]*

D         d|\{0,4}(44|64)(\r\n|[ \t\r\n\f])?
E         e|\{0,4}(45|65)(\r\n|[ \t\r\n\f])?
N         n|\{0,4}(4e|6e)(\r\n|[ \t\r\n\f])?|\\n
O         o|\{0,4}(4f|6f)(\r\n|[ \t\r\n\f])?|\\o
T         t|\{0,4}(54|74)(\r\n|[ \t\r\n\f])?|\\t
V         v|\{0,4}(58|78)(\r\n|[ \t\r\n\f])?|\\v

%%

[ \t\r\n\f]+     return S;

"~="             return INCLUDES;
"|="             return DASHMATCH;
"^="             return PREFIXMATCH;
"$="             return SUFFIXMATCH;
"*="             return SUBSTRINGMATCH;
{ident}          return IDENT;
{string}         return STRING;
{ident}"("       return FUNCTION;
{num}            return NUMBER;
"#"{name}        return HASH;
{w}"+"           return PLUS;
{w}">"           return GREATER;
{w}","           return COMMA;
{w}"~"           return TILDE;
":"{N}{O}{T}"("  return NOT;
@{ident}         return ATKEYWORD;
{invalid}        return INVALID;
{num}%           return PERCENTAGE;
{num}{ident}     return DIMENSION;
"<!--"           return CDO;
"-->"            return CDC;

\/\*[^*]*\*+([^/*][^*]*\*+)*\/                    /* ignore comments */

.                return *yytext;

These sections are non-normative.

SOURCE: http://www.w3.org/TR/css3-selectors/#structural-pseudos

4.1. Property Index

Name Values Initial value Applies to Inherited? Percentages Media
background-attachment scroll | fixed | inherit scroll no visual
background-color <color> | inherit transparent no visual
background-image <uri> | none | inherit none no visual
background-position [ [ <percentage> | <length> | left | center | right ] [ <percentage> |<length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit 0% 0% no refer to the size of the box itself visual
background-repeat repeat | repeat-x | repeat-y | no-repeat | inherit repeat no visual
background [background-color || background-image || background-repeat ||background-attachment || background-position] | inherit see individual properties no allowed on ‘background-position visual
border-collapse collapse | separate | inherit separate table’ and ‘inline-table’ elements yes visual
border-color [ <color> ]{1,4} | inherit see individual properties no visual
border-spacing <length> <length>? | inherit 0 table’ and ‘inline-table’ elements yes visual
border-style <border-style>{1,4} | inherit see individual properties no visual
border-topborder-rightborder-bottomborder-left [ <border-width> || <border-style> || border-top-color ] | inherit see individual properties no visual
border-top-colorborder-right-colorborder-bottom-colorborder-left-color <color> | inherit the value of the ‘color’ property no visual
border-top-styleborder-right-styleborder-bottom-styleborder-left-style <border-style> | inherit none no visual
border-top-widthborder-right-widthborder-bottom-widthborder-left-width <border-width> | inherit medium no visual
border-width <border-width>{1,4} | inherit see individual properties no visual
border [ <border-width> || <border-style> || border-top-color ] | inherit see individual properties no visual
bottom <length> | <percentage> | auto | inherit auto positioned elements no refer to height of containing block visual
caption-side top | bottom | inherit top table-caption’ elements yes visual
clear none | left | right | both | inherit none block-level elements no visual
clip <shape> | auto | inherit auto absolutely positioned elements no visual
color <color> | inherit depends on user agent yes visual
content normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit normal :before and :after pseudo-elements no all
counter-increment [ <identifier> <integer>? ]+ | none | inherit none no all
counter-reset [ <identifier> <integer>? ]+ | none | inherit none no all
cursor [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit auto yes visual,interactive
direction ltr | rtl | inherit ltr all elements, but see prose yes visual
display inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none |inherit inline no all
empty-cells show | hide | inherit show table-cell’ elements yes visual
float left | right | none | inherit none all, but see 9.7 no visual
font-family [ [ <family-name> | <generic-family> ] [, <family-name>| <generic-family> ]* ] | inherit depends on user agent yes visual
font-size <absolute-size> | <relative-size> | <length> | <percentage> | inherit medium yes refer to inherited font size visual
font-style normal | italic | oblique | inherit normal yes visual
font-variant normal | small-caps | inherit normal yes visual
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit normal yes visual
font [ [ font-style || font-variant || font-weight ]? font-size [ /line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit see individual properties yes see individual properties visual
height <length> | <percentage> | auto | inherit auto all elements but non-replaced inline elements, table columns, and column groups no see prose visual
left <length> | <percentage> | auto | inherit auto positioned elements no refer to width of containing block visual
letter-spacing normal | <length> | inherit normal yes visual
line-height normal | <number> | <length> | <percentage> | inherit normal yes refer to the font size of the element itself visual
list-style-image <uri> | none | inherit none elements with ‘display: list-item yes visual
list-style-position inside | outside | inherit outside elements with ‘display: list-item yes visual
list-style-type disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit disc elements with ‘display: list-item yes visual
list-style [ list-style-type || list-style-position || list-style-image ] | inherit see individual properties elements with ‘display: list-item yes visual
margin-rightmargin-left <margin-width> | inherit 0 all elements except elements with table display types other than table-caption, table and inline-table no refer to width of containing block visual
margin-topmargin-bottom <margin-width> | inherit 0 all elements except elements with table display types other than table-caption, table and inline-table no refer to width of containing block visual
margin <margin-width>{1,4} | inherit see individual properties all elements except elements with table display types other than table-caption, table and inline-table no refer to width of containing block visual
max-height <length> | <percentage> | none | inherit none all elements but non-replaced inline elements, table columns, and column groups no see prose visual
max-width <length> | <percentage> | none | inherit none all elements but non-replaced inline elements, table rows, and row groups no refer to width of containing block visual
min-height <length> | <percentage> | inherit 0 all elements but non-replaced inline elements, table columns, and column groups no see prose visual
min-width <length> | <percentage> | inherit 0 all elements but non-replaced inline elements, table rows, and row groups no refer to width of containing block visual
opacity <number> | inherit 1 all no visual
orphans <integer> | inherit 2 block container elements yes visual,paged
outline-color <color> | invert | inherit invert no visual,interactive
outline-style <border-style> | inherit none no visual,interactive
outline-width <border-width> | inherit medium no visual,interactive
outline [ outline-color || outline-style || outline-width ] | inherit see individual properties no visual,interactive
overflow visible | hidden | scroll | auto | inherit visible block containers no visual
padding-toppadding-rightpadding-bottompadding-left <padding-width> | inherit 0 all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column no refer to width of containing block visual
padding <padding-width>{1,4} | inherit see individual properties all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column no refer to width of containing block visual
page-break-after auto | always | avoid | left | right | inherit auto block-level elements (but see text) no visual,paged
page-break-before auto | always | avoid | left | right | inherit auto block-level elements (but see text) no visual,paged
page-break-inside avoid | auto | inherit auto block-level elements (but see text) no visual,paged
position static | relative | absolute | fixed | inherit static no visual
quotes [<string> <string>]+ | none | inherit depends on user agent yes visual
right <length> | <percentage> | auto | inherit auto positioned elements no refer to width of containing block visual
table-layout auto | fixed | inherit auto table’ and ‘inline-table’ elements no visual
text-align left | right | center | justify | inherit a nameless value that acts as ‘left’ if ‘direction’ is ‘ltr’, ‘right’ if ‘direction’ is ‘rtl block containers yes visual
text-decoration none | [ underline || overline || line-through || blink ] | inherit none no (see prose) visual
text-indent <length> | <percentage> | inherit 0 block containers yes refer to width of containing block visual
text-transform capitalize | uppercase | lowercase | none | inherit none yes visual
top <length> | <percentage> | auto | inherit auto positioned elements no refer to height of containing block visual
unicode-bidi normal | embed | bidi-override | inherit normal all elements, but see prose no visual
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom |<percentage> | <length> | inherit baseline inline-level and ‘table-cell’ elements no refer to the ‘line-height’ of the element itself visual
visibility visible | hidden | collapse | inherit visible yes visual
white-space normal | pre | nowrap | pre-wrap | pre-line | inherit normal yes visual
widows <integer> | inherit 2 block container elements yes visual,paged
width <length> | <percentage> | auto | inherit auto all elements but non-replaced inline elements, table rows, and row groups no refer to width of containing block visual
word-spacing normal | <length> | inherit normal yes visual
z-index auto | <integer> | inherit auto positioned elements no visual

4.2. Selector Index

Pattern Meaning Described in section First defined in level
* any element Universal selector 2
E an element of type E Type selector 1
E[foo] an E element with a “foo” attribute Attribute selectors 2
E[foo=”bar”] an E element whose “foo” attribute value is exactly equal to “bar” Attribute selectors 2
E[foo~=”bar”] an E element whose “foo” attribute value is a list of whitespace-separated values, one of which is exactly equal to “bar” Attribute selectors 2
E[foo^=”bar”] an E element whose “foo” attribute value begins exactly with the string “bar” Attribute selectors 3
E[foo$=”bar”] an E element whose “foo” attribute value ends exactly with the string “bar” Attribute selectors 3
E[foo*=”bar”] an E element whose “foo” attribute value contains the substring “bar” Attribute selectors 3
E[foo|=”en”] an E element whose “foo” attribute has a hyphen-separated list of values beginning (from the left) with “en” Attribute selectors 2
E:root an E element, root of the document Structural pseudo-classes 3
E:nth-child(n) an E element, the n-th child of its parent Structural pseudo-classes 3
E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one Structural pseudo-classes 3
E:nth-of-type(n) an E element, the n-th sibling of its type Structural pseudo-classes 3
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one Structural pseudo-classes 3
E:first-child an E element, first child of its parent Structural pseudo-classes 2
E:last-child an E element, last child of its parent Structural pseudo-classes 3
E:first-of-type an E element, first sibling of its type Structural pseudo-classes 3
E:last-of-type an E element, last sibling of its type Structural pseudo-classes 3
E:only-child an E element, only child of its parent Structural pseudo-classes 3
E:only-of-type an E element, only sibling of its type Structural pseudo-classes 3
E:empty an E element that has no children (including text nodes) Structural pseudo-classes 3
E:link
E:visited
an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) The link pseudo-classes 1
E:active
E:hover
E:focus
an E element during certain user actions The user action pseudo-classes 1 and 2
E:target an E element being the target of the referring URI The target pseudo-class 3
E:lang(fr) an element of type E in language “fr” (the document language specifies how language is determined) The :lang() pseudo-class 2
E:enabled
E:disabled
a user interface element E which is enabled or disabled The UI element states pseudo-classes 3
E:checked a user interface element E which is checked (for instance a radio-button or checkbox) The UI element states pseudo-classes 3
E::first-line the first formatted line of an E element The ::first-line pseudo-element 1
E::first-letter the first formatted letter of an E element The ::first-letter pseudo-element 1
E::before generated content before an E element The ::before pseudo-element 2
E::after generated content after an E element The ::after pseudo-element 2
E.warning an E element whose class is “warning” (the document language specifies how class is determined). Class selectors 1
E#myid an E element with ID equal to “myid”. ID selectors 1
E:not(s) an E element that does not match simple selector s Negation pseudo-class 3
E F an F element descendant of an E element Descendant combinator 1
E > F an F element child of an E element Child combinator 2
E + F an F element immediately preceded by an E element Adjacent sibling combinator 2
E ~ F an F element preceded by an E element General sibling combinator 3

4.3. At-Rule Index

SOURCE: http://www.w3.org/TR/CSS/

 

Example:

How about the :nth-child(2n+1)?

(2 x 0) + 1 = 1 = 1st Element
(2 x 1) + 1 = 3 = 3rd Element

(2 x 2) + 1 = 5 = 5th Element

(2 x 3) + 1 = 7 = 7rd Element
(2 x 4) + 1 = 9 = 9th Element

(2 x 5) + 1 = 11 = 11th Element

6.6.5.2. :nth-child() pseudo-class

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element. For values of a and b greater than zero, this effectively divides the element’s children into groups of a elements (the last group taking the remainder), and selecting the bth element of each group. For example, this allows the selectors to address every other row in a table, and could be used to alternate the color of paragraph text in a cycle of four. The a and b values must be integers (positive, negative, or zero). The index of the first child of an element is 1.

In addition to this, :nth-child() can take ‘odd’ and ‘even’ as arguments instead. ‘odd’ has the same signification as 2n+1, and ‘even’ has the same signification as 2n.

The argument to :nth-child() must match the grammar below, where INTEGER matches the token [0-9]+ and the rest of the tokenization is given by the Lexical scanner in section 10.2:

nth
  : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? |
         ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S*
  ;

Examples:

tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

When the value b is preceded by a negative sign, the “+” character in the expression must be removed (it is effectively replaced by the “-” character indicating the negative value of b).

Examples:

:nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc, element */
:nth-child(10n+9)  /* Same */
:nth-child(10n+-1) /* Syntactically invalid, and would be ignored */

When a=0, the an part need not be included (unless the b part is already omitted). When an is not included and b is non-negative, the + sign before b (when allowed) may also be omitted. In this case the syntax simplifies to :nth-child(b).

Examples:

foo:nth-child(0n+5)   /* represents an element foo that is the 5th child
                         of its parent element */
foo:nth-child(5)      /* same */

When a=1, or a=-1, the number may be omitted from the rule.

Examples:

The following selectors are therefore equivalent:

bar:nth-child(1n+0)   /* represents all bar elements, specificity (0,1,1) */
bar:nth-child(n+0)    /* same */
bar:nth-child(n)      /* same */
bar                   /* same but lower specificity (0,0,1) */

If b=0, then every ath element is picked. In such a case, the +b (or –b) part may be omitted unless the a part is already omitted.

Examples:

tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(2n) /* same */

Whitespace is permitted after the “(“, before the “)”, and on either side of the “+” or “-” that separates the an and b parts when both are present.

Valid Examples with white space:

:nth-child( 3n + 1 )
:nth-child( +3n - 2 )
:nth-child( -n+ 6)
:nth-child( +6 )

Invalid Examples with white space:

:nth-child(3 n)
:nth-child(+ 2n)
:nth-child(+ 2)

If both a and b are equal to zero, the pseudo-class represents no element in the document tree.

The value a can be negative, but only the positive values of an+b, for n≥0, may represent an element in the document tree.

Example:

html|tr:nth-child(-n+6)  /* represents the 6 first rows of XHTML tables */

SOURCE: http://www.w3.org/TR/css3-selectors/#structural-pseudos

FOR MORE INFORMATION CONTACT GOOGLE SEARCH 🙂 I JUST GIVE YOU THE TIPS ON HOW TO READ ALL SYNTAX 🙂

Advertisements
This entry was posted in CSS. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s