Advanced CSS Selectors you never knew about

Andy Leverenz
Mar 11, 2016 · 5 min read

First thing is first

Partial Selectors


Ends With ($=)

div[id$=“_myDiv”] { 
// cool CSS stuffs
}
<!-- HTML --> 
<div id="0125_LoginPanel">
Some sample content
</div>
div[id$="_LoginPanel"] { 
margin: 0 3em;
padding: 1em;
}
div[id$=“myDynamicDiv”] { 
// cool CSS stuffs
}

Begins with (^=)

<!-- HTML --> 
<div class="myPanel_1435">
<h1>My custom panel</h1>
</div>
div[class^="myPanel_"] { 
// cool CSS stuffs
}

Contains (*=)

<div class="1gdug_logoutPanel_4828fde"> 
<h1>My Custom Logout Panel</h1>
<form>...</form>
</div>
div[class*="logoutPanel"] { 
// cool CSS stuffs
}

Equals (=)

<!-- HTML --> 
<div class=“3453_mydynamicdiv”>
<h1>My Dynamic Div</h1>
</div>
// 1st way (selects only this given class)
div[class="3453_mydynamicdiv"] {
// cool CSS stuffs
}
// 2nd way (selects all classes)
.3453_mydynamicdiv {
// cool CSS stuffs
}

Quick Review of Partial Selectors

Pseudo-class selectors

a:hover {} 
a:active {}
a:focus {}
a:visited {}
:checked {}
:first-child {}
:last-child {}
// you get the idea

:not(x)

<ul class="nav">
<li>Blog</li>
<li>About</li>
<li>Videos</li>
<li class="highlight">Music</li>
<li>Merch</li>
</ul>
.nav li:not(.highlight) { 
margin: 0 1em 0 0;
padding: 5px 16px;
display: inline-block;
}
input:not([disabled])

::first-letter

p::first-letter { 
// drop cap styles
}
p:first-child::first-letter { 
// drop cap styles for only the first paragraph of text.
}

:first-of-type

article:first-of-type { 
margin-top: 0;
}

:last-of-type

article:last-of-type { 
border-bottom: none;
margin-bottom: 0;
}

Finish line


The Web-Crunch Column

A publication for design, development, and business related articles published via medium and web-crunch.com

Andy Leverenz

Written by

Web-Crunch is a blog that delivers the crunchiest articles on design and development. Follow us or check out the website http://web-crunch.com

The Web-Crunch Column

A publication for design, development, and business related articles published via medium and web-crunch.com