* + * {\r\n margin-top: 1.5em;\r\n}<\/code><\/pre>\nLobotomized owl? Get it?!<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/owl.jpg?ssl=1\")
Illustration by Ping Zhu<\/a>, kiped from A List Apart<\/figcaption><\/figure>\nThe idea is that only elements that have a previous sibling<\/em> get margin on top<\/em>. So that you don’t have to do stuff like:<\/p>\n.the-last-one-so-don't-put-margin-on-me {\r\n margin-bottom: 0;\r\n}<\/code><\/pre>\nInstead, you get even spacing kinda for free:<\/p>\n
See the Pen Lobotomized Owl<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\nYou can see other people playing around<\/a> with it. <\/p>\nThe Mr. Ghost Selector<\/h3>\n
This little guy is such weird characters that my WordPress site won’t even save them, so let’s do this in a Pen (the embed might look weird too, try looking on CodePen itself):<\/p>\n
See the Pen Ghost Selectors<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\nSpeaking of unusual characters, remember that emoji are valid too!<\/p>\n
<div class=\"👻\">\r\n Mrs. Ghost\r\n<\/div><\/code><\/pre>\n.👻 {\r\n\r\n}<\/code><\/pre>\nMonster Selectors<\/h3>\n
Speaking of unusual characters, how about some of these dongers<\/a>:<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/dongers-scary.png?ssl=1\")
<\/figure>\nThose could be selectors too! But in this case, some of those characters need to be escaped in CSS. ESCAPE FROM MONSTER ISLAND. Or something. Fortunately Mathias Bynens has a tool for that<\/a>.<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/css-escapes.png?ssl=1\")
<\/figure>\nWhich means we can do like:<\/p>\n
See the Pen jrRBqB<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\nOr how about some FANGS:<\/p>\n
<div ^^=^^>\r\n OoooOOOO FANGS\r\n<\/div><\/code><\/pre>\n[\\^\\^^=\\^\\^] {\r\n \r\n}<\/code><\/pre>\nAnother Lobotomy Selector<\/h3>\n
How about one like this:<\/p>\n
the-brain:empty {\r\n color: green;\r\n}<\/code><\/pre>\nWhat kind of selector is the-brain? It’s an element we CREATED OURSELVES through MAD SCIENCE like FRANKENSTEIN’S MONSTER. Or just create a custom element<\/a> or whatever.<\/p>\n<template>\r\n The brain!\r\n<\/template><\/code><\/pre>\nvar tmpl = document.querySelector('template');\r\n\r\nvar brainProto = Object.create(HTMLElement.prototype);\r\n\r\nbrainProto.createdCallback = function() {\r\n var root = this.createShadowRoot();\r\n root.appendChild(document.importNode(tmpl.content, true));\r\n};\r\n\r\nvar brain = document.registerElement('the-brain', {\r\n prototype: brainProto\r\n});<\/code><\/pre>\n(Maybe this is supposed to use<\/a> customElements.define()<\/code> these days? I dunno.)<\/p>\nSo now our original selector will match if we do<\/a>:<\/p>\n<the-brain><\/the-brain><\/code><\/pre>\nBut as the selector suggests, it will not match if we do:<\/p>\n
<the-brain>\r\n Fallback content inside.\r\n<\/the-brain><\/code><\/pre>\nIt won’t even match:<\/p>\n
<the-brain> <\/the-brain><\/code><\/pre>\nOtherwise we could do the-brain:blank {}<\/code>, but :blank<\/code><\/a> isn’t really supported yet.<\/p>\nThe Insensitive Selector<\/h3>\n
What’s scarier than insensitivity? Other than MOST ANYTHING. Yah well this is still a really weird looking selector, right? <\/p>\n
a[href$=\".zip\" i] {\r\n\r\n}<\/code><\/pre>\nThe ” i” at the end there is telling the attribute value that “.zip” can match upper or lower case characters.<\/p>\n
This one is from Wes Bos:<\/p>\n
\n🔥 CSS4 is getting case insensitive matching on attribute selectors! pic.twitter.com\/7LQBi2VUcL<\/a><\/p>\n— Wes Bos (@wesbos) December 2, 2015<\/a><\/p><\/blockquote>\n