An in-depth Guide to CSS3 Selectors

An in-depth Guide to CSS3 Selectors

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=”http://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 

Web3Canvas provides Freebies & Resources for Designers.