/* Use #CSS attribute selectors to display links when <a> has no text value but the `href` has a link. */

a[href^="http"]_empty::before {
    content: attr(href);
}

div[class*="left"] {
	float: left;
}

/* Select all <a> that are hrefs: */
a[href]{}

/* Select all elements that have a class (useful if JS is adding classes somewhere) */
article[class]{}

/* Select an ID, but with the specificity of a class:  */
section[id="sideBar"]{color: red}

/* Style all links that are fully qualified URLs, knowing that ^ means "starts with": */
a[href^="http"]{}

/* Need to style a link to a ZIP or a PDF? Totally fine, too. Use the $ which means "ends with" */
a[href$=".zip"]:after{content:"(zip)"}

/* Style an image based on one word existing in the alt attribute? Let's use the space substring selector: */
img[alt~="Insurance"]{}

/* Style an image based on the name of the image file itself? Also doable, even if you're image is this-image-shot-april-2-2014.png. The | is a hyphen substring selector: */
img[src|="-april-"]{}