E:empty
This pseudo class selects an 'E' element which has no children or content inside it. For example:
HTML
CSS
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
CSS
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
CSS
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
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
CSS
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
CSS
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
CSS
In this case, all
<p> tags have an ID attribute who value contain the substring "val".