Monday, July 01, 2013

Some cool CSS selectors’ addition in selectors level 4 – The future

cool CSS selectors
The web is constantly evolving, Some modules of CSS3 has just started making its way, specs are still in development process and more advance level CSS modules have been drafted to evolve it further, which is being referred as "Selectors level 4". Selectors have been with us since the beginning of CSS. Most awaited selector of level 4 is; Parent Selector of a given element. This advance selector will offer the possibility to target parent of any element without javaScript. There are many such new cool selectors in this level that make website management easier.

Parent selector

There was no way to select the parent container in CSS but in the W3C draft of selectors level 4, parent selector has been introduced. You can select element other than the last one. Now, it's easy to style the fieldset on the focus of an input element.

$fieldset input: focus { background: #e1e1e1; }

Any syntax of CSS selectors level 4 mentioned here, could be changed. It's only a draft. Like "$" symbol before the selector [$fieldset], it was proposed in the first draft which got changed to "!" exclamation mark after the selector [fieldset!].

Logical combinator – :matches, :not

It takes the selectors list as an argument and apply the styles.

/* Basic simple use*/
a:link, a:hover, a:visited, a:focus { color: green; }

/* can be written as */
a:matches(a:link, a:hover, a:visited, a:focus) { color: green; }

/*more better use*/
h1:matches(.section1, .section2, .section3) { background: red; }

/*same with negation*/
h1:not(.section1, .section2, .section3) { background: black; }

Location pseudo-classes- :any-link, :local-link

This controls the styling of link more smartly, any-link combine the a:link and a:visited link into one. And using local-link, you can get a different link style of any specific page or based on the domain.

a:link, a:visited { color: green; }

/*same can be written as*/
a: any-link { color: green; }

Grid-structural pseudo classes – :column, :nth-column, :nth-last-column

Applying style to a column in a grid will be possible in CSS selector level 4. Imagine a grid with different plan options and a specific column (plan) need to be highlighted.

:column(.highlighted) { background: yellow; }

/*alternate column color*/
:nth-column(even) { background: gray; }

via Reality on Web by