CSS Selectors are very useful for modern web development. So have a look on major Selectors you should know. Some of them intended to work only on modern browsers.
“*” Star CSS selector
The Star will target every element in the page and mostly using for resetting CSS by giving Zero values to margin and padding
Eg:
* {
margin:0;
padding:0;
}
This star selector can be use to select all elements in a parent element
Eg:
container * {
padding:5px;
}
“+” Plus CSS Selector
Plus (+) CSS selector is used to select adjacent element. But Plus (+) CSS Selectors will only select the Immediate sibling.
Eg:
<div></div> <p></p> <p></p>
div + p {
background: blue;
}
In this case, Background will affect only for first “p” element.
“>” Greater than/ Angle bracket CSS Selector
“>” Angle bracket CSS selector is used to select immediate child of the element
Eg:
ul li {
padding:0;
}
<ul> <li>Immediate Child <ul> <li>Grand Child</li> </ul> </li> <li>Immediate Child</li> <li>Immediate Child</li> </ul>
In this case, Padding will affect only for immediate <li> child, not for grand <li> child
“~” Tilde CSS Selector or sibling CSS selector
Tilde CSS selector is used to select all adjacent selector followed by the former element. This has a slight difference from Plus (+) CSS Selector as its only allows to select immediate sibling.
Eg:
div ~ p {
background:grey;
}
<p>para</p> <div>my div</div> <p>change bg</p> <p>change bg</p> <p>change bg</p> <p>change bg</p>
In this case, It will affect all “a” tag with canvas inside the href value.
[href=””] href CSS selector
href CSS selector is used to select anchor tag with specific URL
Eg:
a[href=”https://web3canvas.com”] {
color:orange;
}
In this case, It selects “a” tags with the href value of web3canvas. Others remain unaffected.
[title] CSS selector
Title CSS selector is used to select an element with title attribute.
Eg:
a[title] {
color:#FF0;
}
[href^=” “] href carrot CSS selector
href carrot CSS selector is used to target “a” tag having href value and starting with the keyword.
Eg:
a[href^=”http”] {
color:grey;
}
In this case, This will change color of all “a” tag having external link.
[href$=” “] href dollar CSS selector
href dollar CSS selector is just reverse of carrot selector. href dollar CSS selector is used to target “a” tags have href ending with specific keyword
Eg:
<pre>a[href$=”.in”] {
color:grey;
}
In this case, It targets “a” tags have href ending with .in. It can be useful to select Image formats like .jpg
[data-*=” “] data CSS selector
data CSS selector is used to select elements with data attributes.
Eg:
div[data-type=”single”] {
color:black;
}
<div data-type=”single”>single div</div>
In this case, The css will target div with data-type single.
[data-~=” “] data tilde CSS selector
With this data tilde CSS selector, you can target element with multiple data attributes value.
Eg:
div[data-type~=”single”] {
color:black;
}
div[data-type~=” double”] {
border:1px solid blue;
}
<div data-type="”single”">single div</div> <div data-type="”single">single div</div>
:checked CSS selector
Checked CSS selector is used to apply class to an input when it is checked.
Eg:
input[type=radio]:checked {
border: 1px solid black;
}
:before and :after CSS selectors
before and after CSS selectors is very useful. It is used to apply class to before or after an element. You might have seen the clearfix hack with after. Before and after can be used in many ways like Arrows, Blockquotes and so on.
Eg:
blockquote:before {
content: "\201C";
}
:not CSS selector
Not CSS selector will select all elements except the given class or id.
Eg:
div:not(#wrapper) {
background: black;
}
In this case, background will change to black for all Div except #wrapper.
:: Double column Pseudo Element CSS selector
Double column Pseudo Element CSS selector is used to style fragments of an element.
::-webkit-input-placeholder {
color: red;
}
p::first-letter {
font-size: 30px;
}
p::first-line {
font-weight: bold;
}
nth child CSS selector
nth child is used to target specific elements in a stack. It can be used in many ways. You might have seen background color for even/odd li, no border bottom for last child etc..
eg: nth-child
li:nth-child(3) {
color: red;
}
eg: nth-last-child
li:nth-last-child(2) {
color: red;
}
eg: nth-of-type
ul:nth-of-type(3) {
border: 1px solid black;
}
eg: nth-last-of-type
ul:nth-last-of-type(3) {
border: 1px solid black;
}
eg: first-child
ul li:first-child {
border-top: none;
}
eg: last-child
ul li:last-child {
color: green;
}
eg: only-child
div p:only-child {
color: red;
}
eg: first-of-type
ul:first-of-type {
font-weight: bold;
}
Final Thoughts
These CSS selectors make your Coding easier than ever. My favorite is tilde selector and plus selector. It is used in most of the modern sites. You can also make some show hide animations only with CSS. Be creative.
Be careful, as some of the selectors will not support older browsers like IE. However, you can bookmark this page for future reference.
Header Image: Anush
