Advanced CSS Selectors you never knew about

Andy Leverenz
Mar 11, 2016 · 5 min read
Image for post
Image for post

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


Image for post
Image for post

The Web-Crunch Column

A publication for design, development, and business related…

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

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store