This post is about various CSS selectors. In previous many posts, we have already seen these selectors, but in this post, we discuss these selectors more deeply.
The cascading style sheets (CSS) are used to style the content of the HTML document. To styles, content CSS has the following syntax.
What is a CSS selector?
HTML elements become selectors in css used to apply styles to a particular element. You can specify elements (tag) with various patterns to select some specific elements and apply styles to them.
Syntax of CSS Selector
selector { property:value; }
Description of Syntax
A selector is any HTML tag to which style is applied. (<p>,<h1>,<table>,…)
Property is HTML attributes. (color, border, width,…)
The value assigned to properties. (color value can be red, #000000).
Let’s discuss selectors.
(1) Type selector
The type selector is referred to as the element name, which selects a specific element from an HTML document (like <p>,<h1>,<div>,..).
Syntax
element name { property-name:value; }
Example
Selector “p” matches the <p> tag and styles applied to the content of <p>.
<!DOCTYPE html> <html> <head> <title>selector</title> <style> p{ font-size:20pt; color:#f00; padding:5px; border:2px inset #ccc;} </style> </head> <body> <h3>Type selector</h3> <p>This paragraph is affected.This paragraph is matches with type selector "p" in CSS.</p> <h4>This text is not affected.</h4> </body> </html>
Output:-
 |
| Type selector |
(2) Id selector
The Id selector selects all those elements which have the id attribute specified. You can access element by unique id_name with hash (#) prefix.
Syntax
#id_name { property-name:value; }
Note:-
The id attribute name can not start with a numeric value.
Example
#blue id selects <p> and <h3> elements with id attribute blue.
<!DOCTYPE html> <html> <head> <title>selector</title> <style> #blue{ font:16pt bold; color:#00f;} </style> </head> <body> <h3 id="blue">Id selector</h3> <p id="blue">This paragraph is affected.</p> </body> </html>
Output:-
 |
| Id selector |
"p#blue" id selects only <p> element with id attribute blue.
Output:-
Output:-
Output:-
Output:-
Output:-
Output:-
Output:-
Output:-
Output:-
Output:-
Output:-
Output:-
 |
| Id selector |
(3) Class selector
The class selector selects only those elements which have class attributes specified. The class selector is defined by the writing period (.) before the class name.
Syntax
.class_name { property-name:value; }
Example
. background class selector applies background color to <h3> and <h4> elements that have a class background.
<!DOCTYPE html> <html> <head> <title>selector</title> <style> .background{ background-color:#aee} </style> </head> <body> <h3 class="background">class selector</h3> <h4 class="background">This is level4 heading.</h4> </body> </html>
Output:-
 |
| Class selector |
You can also specify a class selector like this:
element_name.class_name { property-name:value; }
Example
Background color applied to only <h4> element with class h4.background.
 |
| Class selector |
(4) Universal Selector
instead of selecting a specific element, the selector matches with any element type. This selector is called a universal selector. It is specified by an asterisk (✳️) symbol.
Syntax
* { property-name:value; }
Example
All the elements are affected.
<!DOCTYPE html> <html> <head> <title>selector</title> <style> *{ color:#fff; background-color:#000;} </style> </head> <body> <h3>Universal selector</h3> <p>This paragaraph is selected.</p> <h4>This heading is also selected.</h4> </body> </html>
Output:-
 |
| Universal selector |
(5) Descendant selector
The descendant selector selects a particular element which is lies under another element.
Syntax
element1 element2 { property-name:value; }
Here element1 is an outer element and element2 is an inner element (lies inside the outer element).
Example
<span> elements inside <p> element are displayed in red color.
<!DOCTYPE html> <html> <head> <title>selector</title> <style> p span{ color:#f00;} </style> </head> <body> <h3>Descendant selector</h3> <p>This is <span>descendant</span> <span>selector</span> example.</p> </body> </html>
Output:-
 |
| Descendant selector |
Another example selects only <p> element and applied styles.
<!DOCTYPE html> <html> <head> <title>selector</title> <style> .descendant p{ color:#ffcc00; font-weight:bold;} </style> </head> <body> <h3>Descendant selector</h3> <div class="descendant"> <h2>This is heading.</h2> <p>This is paragraph.</p> </div> </body> </html>
Output:-
 |
| Descendant selector |
(6) Child selector
The selector selects only those elements that are a direct child of a parent element. the (>) symbol is used to specify a direct child.
Syntax
element 1(parent) > element 2(child) { property-name:value; }
Example
For example, the color of text is red for only those <p> elements that are a direct child of div class (. child).
<!DOCTYPE html> <html> <head> <title>selector</title> <style> .child>p{ color:#f00;} </style> </head> <body> <h3>Child selector</h3> <div class="child"> <p>This paragraph is affected.</p> <p>This paragraph is affected.</p> <div class="c1"> <p>This paragraph is not affected.</p> </div></div> </body> </html>
Output:-
 |
| Child selector |
(7) Adjacent sibling selector
The adjacent sibling selects an element that immediately comes after another element. The word “adjacent sibling” means the same parent immediately following.
(+) Symbol is used to specify adjacent siblings.
Syntax
element1 + element2 { property-name:value; }
Example
<p> elements that come after <h2> element is in blue. Other <p> elements have no effects.
<!DOCTYPE html> <html> <head> <title>selector</title> <style> h2 + p{ color:#00c;} </style> </head> <body> <h3>Adjacent sibling selector</h3> <h2>Heading</h2> <p>Paragraph immediate after heading.</p> <p>Paragraph</p> <h2>Heading</h2> <p>Paragraph immediate after heading.</p> <p>Paragraph</p> <p>Paragraph</p> </body> </html>
Output:-
 |
| Adjacent sibling selector |
(8) General sibling selector
The general sibling selects all the elements which come after the specified element. General sibling selector specified by (~) symbol.
Syntax
element1 ~ element2 { property-name:value; }
Example
All the <p> elements that come next after <h3> elements have a red background and yellow color.
<!DOCTYPE html> <html> <head> <title>selector</title> <style> h3 ~ p{ color:#ffff00; background-color:#ff0000; } </style> </head> <body> <h3>General sibling selector</h3> <p>This is parahraph.</p> <p>This is parahraph.</p> <h4>Level4 heading</h4> <p>This is parahraph.</p> </body> </html>
Output:-
 |
| General sibling selector |
(9) Pseudo-class selector
The pseudo-class selector selects a specific element and applies special CSS effects. The Pseudo class is combined with the CSS class using the (:) symbol.
Syntax
element:pseudo-class { property-name:value; }
Example
When the mouse hovers over the list of colors purple background is displayed.
<!DOCTYPE html> <html> <head> <title>selector</title> <style> li:hover{ background-color:#c0c; } </style> </head> <body> <h3>Pseudo class selector</h3> <ul> <li>Red</li> <li>Green</li> <li>Blue</li> </ul> </body> </html>
Output:-
(10) Pseudo-element selector
The pseudo-element selector selects a specific part of a selected element. A double colon (::) is used for the pseudo-element selector.
Syntax
element::pseudo-element { property-name:value; }
Example
The first letter of the list is bolder, bigger than the rest of the characters and the color is red.
<!DOCTYPE html> <html> <head> <title>selector</title> <style> li:first-letter{ font-weight:bold; font-size:18pt; color:#f00; } </style> </head> <body> <h3>Pseudo element selector</h3> <ol> <li>Apple</li> <li>Cherry</li> <li>Orange</li> </ol> </body> </html>
Output:-
 |
| Pseudo element selector |
(11) Attribute selector
Attribute selector applies styles to elements with particular specified attributes or attribute values.
Following rules applied to attribute selector.
[“attribute”] selector
Selects elements with specified attributes.
Syntax
element[attribute] { property-name:value; }
Example
Selects all <p> elements that have the “lang” attribute specified.
<!DOCTYPE html> <html> <head> <title>selector</title> <style> p[lang] { color:#0f0; } </style> </head> <body> <p>This is paragraph</p> <p lang>This is paragraph.</p> <p lang>This is paragraph.</p> </body> </html>
Output:-
 |
| Attribute selector |
[attribute=”value”] selector
Selects all elements which have specific attribute and value.
Syntax
element[attribute=”value”] { property-name:name; }
Example
Selects <p> element which has lang attribute with value “fr”.
<!DOCTYPE html> <html> <head> <title>selector</title> <style> p[lang="fr"] { color:#0f0; } </style> </head> <body> <p>This is paragraph</p> <p lang>This is paragraph.</p> <p lang>This is paragraph.</p> <p lang="fr">This is paragraph.</p> <p lang="en">This is paragraph.</p> </body> </html>
Output:-
![[attribute="value"] selector](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihDYn7P0spTHToR2fzaL8gAc2lSrJCkarcdsuK5QnDABjflBwM_M8cc0n166-HG5MLvP8w9dqJfc4c4qo_HDJIaLmmKw96rW4m6R0lcnXokMC7TG02kRLHrXsA7e3gxMLWH7wI7W9pJlw/s720/Screenshot_20210903-203901%257E2.png "[attribute=\"value\"] selector") |
| [attribute="value"] selector |
[attribute~=value] selector
Selects all <p> elements with specific attributes and in value particular word specified.
Syntax
element[attribute~=value] { property-name:value; }
Example
Selects all <p> elements whose attribute value contains the word “fr”. (Only space-separated list is selected, "fr-en" is not selected).
<!DOCTYPE html> <html> <head> <title>selector</title> <style> p[lang~="fr"] { color:#0f0; } </style> </head> <body> <p>This is paragraph</p> <p lang>This is paragraph.</p> <p lang>This is paragraph.</p> <p lang="fr">This is paragraph.</p> <p lang="en">This is paragraph.</p> <p lang="fr-en">This is paragraph.</p> <p lang="en fr">This is paragraph.</p> </body> </html>
Output:-
![[attribute~="value"] selector](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE3NW3R6QK7XtYdaJ69VHVbmRRqoe872RopqROZ_Y6MSZi6BlQd2W4wA5Er-_GFHNDSgP03F5bmMymz3pUZfTq5EZ98JbAZsLKx6LQ_1kTth_MIyol1uuXK6ZLRrv3THLOHhiTuJJElF4/s720/Screenshot_20210903-213815-067.png "[attribute~=\"value\"] selector") |
| [attribute~="value"] selector |
[attribute|=”value”] selector
Selects all elements whose attribute value contains a specified value or begins with the specified value.
Syntax
element[attribute|=”value”] { property-name:value; }
Example
Selects all <p> elements in which the lang attribute contains or begins with the “fr” word.
p[lang|="fr"] { color:#f00; }
Output:-
![[attribute|="value"] selector](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBNF0muBlnODaqerXWpTJS_xV1UyHNalCKzGrhHPWx1GHYvxgjqRtdJDevlqbn1u5Q7grlemgHyBctMI-x35l_jpBqnhqBgs7L18ZY_12VMvOVbFbl7ANlL1-e31r2Gc3i3tRQ7Cp9lnY/s720/Screenshot_20210903-214315-994.png "[attribute|=\"value\"] selector") |
| [attribute|="value"] selector |
[attribute^=”value”]
Selects all elements whose attribute value starts with the specified value.
Syntax
element[attribute^=”value”] { property-name:value; }
Example
Selects all <p> elements whose attribute value starts with the word “fr”.
p[lang^="fr"] { color:#f00; }
Output:-
![[attribute^="value"] selector](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglI6zBRCjW1nfVNte14BCTG2uzcIYTrSzNisxbriYxAzeAA_TcKJ3Z_baFjZ2e48eNHZTMz4MetVA-6jM5JwraEnJtHUxu3zZNbRQSNGNAchxm4nK7GHJ54xDr7aXpYWK2i6dh3kYzJ6E/s720/Screenshot_20210903-215446%257E2.png "[attribute^=\"value\"] selector") |
| [attribute^="value"] selector |
[attribute$=”value”]
Selects all elements whose attribute value end with the specified value.
Syntax
element[attribute$=”value”] { property-name:value; }
Example
Selects all <p> elements whose attribute value end with the word “fr”.
p[lang$="fr"] { color:#f00; }
![[attribute$="value"] selector](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMD9fFDT5-bG3jclui7tWhxU91-xWwZ6upnj05Hht1dkrolGD6cQ6-pCSIHsghkAMqajCHZQJ29aQ2G3upppgJ9soLOF2uHPjhmWUIEWT7Ry6Me2PlHKITIG1RrSEzvYAhKfBKFVfOLw/s720/Screenshot_20210903-215850-919.png "[attribute$=\"value\"] selector") |
| [attribute$="value"] selector |
[attribute*=”value”]
Selects all elements whose attribute value contains the specified value.
Syntax
element[attribute*="value"] { property-name:value; }
Example
Selects all <p> elements whose attribute value contains “fr”.
p[lang*="fr"] { color:#f00; }
Output:-
![[attribute*="value"] selector](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqfcZFlB0uHYx7oPG2YR5a7SE8noc8XxRp0g9KdRQ_1qCjyj0Wa-22DJ_c9Kur3hU3tyBi_f-uPYQJ4ScMXwZoQYl3BuO7uXIPWaEgH0FzxtjHJzy1Idi7hr8d2Enk8M36nB4Lo9BXe_Q/s720/Screenshot_20210903-220440-071.png "[attribute*=\"value\"] selector") |
| [attribute*="value"] selector |
Grouping selectors
Sometimes same CSS styles are used for different types of elements, and CSS styles are repeated every time.
CSS allows grouping these selectors by using a comma between selectors.
Example
The same color (blue) and italic font are applied to <h1>,<p>, and <ul> elements.
<!DOCTYPE html> <html> <head> <title>selector</title> <style> h1,p,ul { font-style:italic; color:#00f; } </style> </head> <body> <h1>grouping selectors</h1> <p>paragraph</p> <ul> <li>Red</li> <li>Green</li> <li>Blue</li> </ul> </body> </html>
Output:-
 |
| Grouping selector |
Conclusion
You can use these various types of selectors as per your requirements. The type, class, and id are basic selectors. When selectors use with combination it is called combinator selectors. (Like Adjacent sibling selector, General sibling selector, Descendant selector, and child selector).
0 Comments