When learning the intricacies of CSS, it's very important that you are familiar with its different CSS Selectors. Mastering CSS Selectors is very useful as you can also use what you've learned in Jquery selection. In this post, I'll tackle all the available CSS selectors including selectors available only in CSS3.
Universal Selector
Pattern: *
Sample:
* {margin: 0px;}
div * {margin: 0px;}
<body>
<div>
<p>Hello World!<p>
</div>
</body>
This selector matches any elements. The 1st css line selects all elements - body,div, and p. The 2nd css line selects the descendant of the div element - p.
Type Selector
Pattern: element1
Sample:
h3{padding: 0px;}
p {font-size: 1em;}
<body>
<div>
<h3>My Blog</h3>
<p>Hello world!</p>
<p>Im the King!</p>
</div>
</body>
This selector matches all the elements of the specified type. In the 1st css line, it selects the header3 (h3) element, while in the second css line, it selects the 2 paragraph (p) elements.
Descendant Selector
Pattern: element1 element2
Sample:
body div {font-size: 12em;}
table tr td {color: purple;}
<body>
<div>
<table>
<tbody>
<tr> <td>Data1</td> </tr>
<tr> <td>Data2</td> </tr>
</tbody>
</table>
</div>
</body>
This selector matches all the descendant elements. A descendant can be a child, grandchild, great-grandchild,etc. In the 1st line, it selects the div element which is a descendant(child) of the body element, while in the second line, it selects all the td elements that are descendants of both the tr element (child) and table element (grandchild).
Child Selector
Pattern: element1 > element2
Sample:
div > span {background-color: blue;}
ul > li {font-size: 1.1em;}
<body>
<div>
<h1>My Blogs</h1>
<span>Blog descriptions...</span>
<ul>
<li>Blog <span>item 1</span></li>
<li>Blog <span>item 2</span></li>
</ul>
</div>
</body>
This selector matches all the child elements. In the 1st line, it selects one span element which is a child of the div element, while in the second line, it selects all the 2 list (li) elements that are children of the unordered list (ul) element.
Adjacent Sibling Selector
Pattern: element1 + element2
Sample:
table + p {margin-left: 2.5em;}
h1 + span {margin-right: 0;}
<body>
<div>
<h1>Tables</h1>
<span>first span</span>
<table></table>
<p>first paragraph</p>
<div>
<span>span in div</span>
<p>p in div</p>
<div>
<p>2nd paragraph</p>
<span>2nd span</span>
</div>
</body>
This selector matches the adjacent sibling element. In the 1st line, it selects the first paragraph (p) element which is an adjacent sibling of the table element, while in the second line, it selects the first span element which is an adjacent sibling of the header1 (hl) element.
General Sibling Selector
Pattern: element1 ~ element2
Sample:
table ~ p {margin-left: 2.5em;}
h1 ~ span {margin-right: 0;}
<body>
<div>
<h1>Tables</h1>
<span>first span</span>
<table></table>
<p>first paragraph</p>
<div>
<span>span in div</span>
<p>p in div</p>
<div>
<p>2nd paragraph</p>
<span>2nd span</span>
</div>
</body>
This selector matches the element that is a sibling of another element. In the 1st line, it selects the first and second paragraphs which are both siblings of the table element, while in the second line, it selects the first and second span elements which are both siblings of the h1 element.
Class Selector
Pattern: element1.classname
element1.classname1.classname2
Sample:
p.important {color: red;}
.example {background: green;}
.note.extreme {background: blue;}
<body class="note extreme">
<p>paragraph with no class</p>
<p class="important">paragraph with important class</p>
<p class="example">paragraph with example class</p>
<span class="example">span with example class</span>
</body>
This selector matches any element that has a class attribute containing the specified values. In the 1st line, it selects the second paragraph (p) element that has an "important" class attribute. The second line selects the third paragraph (p) element and the span element which both have "example" class attribute. The third line selects the body element because it has a class attribute of "note" and "extreme".
ID Selector
Pattern: element1#idname
Sample:
body#home {background: silver;}
#example {background: lime;}
<body id="home">
<p>paragraph with no id</p>
<p id="example">paragraph with id</p>
</body>
This selector matches an element with the specified id attribute. In the 1st line, it selects the body element which has a "home" id attribute while in the second line, it matches the 2nd paragraph (p) element which has an "example" id attribute.
Simple Attribute Selector
Pattern: element1[attr]
Sample:
a[class] {border: 2px dotted blue;}}
<body>
<a>anchor element with no class attribute</a>
<a class="any">anchor element with class attribute</a>
<a class="important">anchor element with important class attribute</a>
<a class="important enemy">last anchor element</a>
</body>
This selector matches an element if the specified attribute is present regardless of the attribute's value. In the css line, it selects all except the first anchor (a) element which have a "class" attribute.
Exact Attribute Selector
Pattern: element1[attr="value"]
Sample:
a[class="important"] {color: blue;}
<body>
<a>anchor element with no class attribute</a>
<a class="any">anchor element with class attribute</a>
<a class="important">anchor element with important class attribute</a>
<a class="important enemy">last anchor element</a>
</body>
This selector matches an element if its complete attribute value corresponds to the specified value. In the css line, it selects the third anchor (a) element as it exactly matches the "important" attribute value.
Partial Attribute Selector
Pattern: element1[attr~="value"]
Sample:
a[class~="important"] {color: blue;}
<body>
<a>anchor element with no class attribute</a>
<a class="any">anchor element with class attribute</a>
<a class="important">anchor element with important class attribute</a>
<a class="important enemy">last anchor element</a>
</body>
This selector matches an element if a portion of its space-separated attribute values corresponds to the specified value. In the css line, it selects the third and fourth anchor (a) element since both have "important" class attributes.
Beginning Substring Attribute Value Selector
Pattern: element1[attr^="substring"]
Sample:
a[class^="enemy"] {color: blue;}
a[class^="important"] {color: red;}
<body>
<a>anchor element with no class attribute</a>
<a class="any">anchor element with class attribute</a>
<a class="important">anchor element with important class attribute</a>
<a class="important enemy">last anchor element</a>
</body>
This selector matches any element if its attribute value starts with the specified value. In the 1st css line, it can't select any anchor (a) element because none of the class attributes starts with "enemy". In the second css line, it matches the third and fourth anchor (a) elements.
Ending Substring Attribute Value Selector
Pattern: element1[attr$="substring"]
Sample:
a[class$="enemy"] {color: blue;}
a[class$="important"] {color: red;}
<body>
<a>anchor element with no class attribute</a>
<a class="any">anchor element with class attribute</a>
<a class="important">anchor element with important class attribute</a>
<a class="important enemy">last anchor element</a>
</body>
This selector matches any element if its attribute value ends with the specified value. In the 1st css line, it selects the last anchor (a) element because its class attribute ends with "enemy". In the second line, it fails to match any element as there are no anchor elements whose class attributes values ends with "important".
Arbitrary Substring Attribute Value Selector
Pattern: element1[attr*="substring"]
Sample:
a[href*="/myblog"] {text-transform: lowercase;}
p[class*="check-"] {background: green;}
<body>
<a>anchor element with no class attribute</a>
<a class="any">anchor element with class attribute</a>
<a class="important">anchor element with important class attribute</a>
<a class="important enemy">last anchor element</a>
</body>
This selector matches any element if its attribute value contains the specified value. In the 1st line, it selects any anchor (a) element if its href attribute value contains "/myblog", i.e., it matches "page/myblog" or "/myblog/page" or "page1/myblog/details". In the second line, it matches any paragraph (p) element if its class attribute value contains "check-", i.e., it matches "check-me" or "allcheck-" or "allcheck-me".
Language Attribute Selector
Pattern: element1[lang|="lc"]
Sample:
html[lang|="tr"] {color: red;}
<html lang="tr-en-cs">
<body>
</body>
<html>
This selector matches any element with a lang attribute that contains hyphen-separated list of values and the first value corresponds with the specified value. In the css line, it selects a html element if the html's "lang" attribute contains hyphen-separaed list of values starting with a "tr" value, i.e., it matches 'lang="tr-en-cs"'.
To be continued...
