New CSS3 Sekector: 2015

E:empty

This pseudo class selects an 'E' element which has no children or content inside it. For example:

HTML

1<div></div>

2<div>

3    Hello World!

4</div>

CSS

1div:empty{

2    width: 100px;

3    height: 100px;

4    background: green;

5}

In this case, the first <div> element gets selected.

E:not(s)

This expression selects an element E which is not a selector s. For example:

HTML

1<p>Lorem Ipsum Donor 1</p>

2<p>Lorem Ipsum Donor 2</p>

3<p>Lorem Ipsum Donor 3</p>

4<p>Lorem Ipsum Donor 4</p>

5<p>Lorem Ipsum Donor 5</p>

CSS

1p:not(:first-child){

2    color: green;

3}

In this case, the last 4 <p> tags are colored green. You can put any valid selector inside the :not() pseudo selector.

E:only-child and E:only-of-type

E:only-child selects an E element which is the only element of its parent where as E:only-of-type checks if it is the only sibling of the given type. For example:
HTML

1<div>

2    <p>Lorem Ipsum Donor 1</p>

3</div>

4 

5<div>

6    <p>Lorem Ipsum Donor 1</p>

7    <p>Lorem Ipsum Donor 1</p> 

8</div>

CSS

1p:only-child{

2    color: green;

3}

In this case, p:only-child colors the <p> element of the first <div> element.

The :root selector

The :root selector always selects the root of the document which is the <html> element. It has higherspecificity than a normal element selector.

CSS

1:root{

2    background: green

3}

4html{

5    background: red;

6}

In this case, a green color background is applied to the <html> element instead of red due to :root's higher specificity.

When dealing with SVG and XML, the :root selector may point to a different element other than the <html>element.

E[foo^="bar"]

Here E stands for an HTML element, foo is an attribute and bar represents a value. This expression selects elements whose "foo" attribute has value that starts with the string "bar". For example:

HTML

1<p id="val-1">HTMLxprs</p>

2<p id="val-2">SitePoint</p>

3<p id="val-3">EggheadIO</p>

4<p id="val-4">SotchIO</p>

5<p id="some-val">Not a value</p>

CSS

1p[id^="val"]{

2    color: red

3}

The above CSS selector will select only those <p> elements who id attribute has value that starts with "val". In this case, the first four <p> tags are colored red.

E[foo$="bar"]

This expression selects HTML elements whose 'foo' attribute has value that ends with the string 'bar'. For example:

HTML

1<p id="val-1">HTMLxprs</p>

2<p id="val-2">SitePoint</p>

3<p id="val-3">EggheadIO</p>

4<p id="val-4">SotchIO</p>

5<p id="some-val">Not a value</p>

CSS

1p[id$="val"]{

2    color: red

3}

In this case, only the last <p> tag has an ID attribute whose value ends with the string "val".

E[foo*="bar"]

This expression selects all the HTML elements whose 'foo' attribute has a value containing substring bar. For example:

HTML

1<p id="val-1">HTMLxprs</p>

2<p id="val-2">SitePoint</p>

3<p id="val-3">EggheadIO</p>

4<p id="val-4">SotchIO</p>

5<p id="some-val">Not a value</p>

CSS

1p[id*="val"]{

2    color: red

3}

In this case, all <p> tags have an ID attribute who value contain the substring "val".

New CSS3 Sekector

Monday, 20 April 2015

JavaScript Function for Cross OS and Browser......

Wednesday, 28 January 2015

E:empty

E:not(s)

E:only-child and E:only-of-type

The :root selector

E[foo^="bar"]

E[foo$="bar"]

E[foo*="bar"]