Hi all,
Selector are the basic component in the CSS. Here's a definition of the selector from W3C documentation -
A Selector represents a structure. This structure can be used as a condition (e.g. in a CSS rule) that determines which elements a selector matches in the document tree, or as a flat description of the HTML or XML fragment corresponding to that structure. -
W3C
Below is some example of some rich contextual representations of CSS3 selectors.
E[foo^="bar"]
Html :-
<p id="val-1">Findnerd</p>
<p id="val2">Findnerd</p>
<p id="other-val">Blank</p>
css :-
p[id^="val"]{
color: blue
}
The above CSS selector will select only those p elements who id attribute has value that starts with "val". It mean the first two p tags will colored blue.
E[foo$="bar"]
This expression selects HTML elements whose 'foo' attribute has value that ends with the string 'bar'.
Example:
Html :-
<p id="val-1">Findnerd</p>
<p id="val2">Findnerd</p>
<p id="other-val">Blank</p>
css :-
p[id^="val"]{
color: blue
}
In this case the last P will blue color.
E[foo*="bar"]
This expression selects HTML elements whose 'foo' attribute has any `id`.
Example:
Html :-
<p id="val-1">Findnerd</p>
<p id="val2">Findnerd</p>
<p id="other-val">Blank</p>
css :-
p[id^="val"]{
color: blue
}
In this case the allP will blue color.
:root selector
:root selector selects the root of the html page which will be the html element. It take higher specificity than a normal element selector.
Example:
css :-
:root{
background: Blue;
}
html{
background: black;
}
Blue color on background is applied to <html> element instead of red due to :root's higher specificity.
:nth-child(n)
Click here
E:empty
This pseudo selector works when an 'E' element which has no children or content inside it.
Example:
Html :-
<div></div>
<div>
Hello World!
</div
Css:-
div:empty{
width: 120px;
height: 120px;
background: Blue;
}
E:not(s)
Expression selects an element `E` which is not a selector `s`.
Example:
Html :-
<p>Findnerd</p>
<p>Findnerd</p>
<p>Findnerd</p>
Css:-
p:not(:last-child){
color: Blue;
}
In this case only first two p element will colored blue
0 Comment(s)