:empty

Targets elements with no child content.

:only-child

Targets elements with one child.

:root

Refers to the html element, but with more specificity.

:target

When a link that targets the element with the ID #col-c is clicked, the #col-c box takes the style below:

#col-c:target {
  background: #eff1f2;
  color: initial;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
}

After clicking the link and the targeted element taking the new style, you can remove the style by clicking another link that targets another style such as #col-a, or even just #.

 

:not

The negation psuedo-class.
Select all div elements in the HTML page except #col-a.

div:not(#col-a) {
  border: solid 1px red;
}

Select all input elements in the form except the submit button.

form input:not([type="submit"]) {
  border: solid 1px red;
}

Give all list items left margin values except the first list element.

ul li:not(:first-child) {
  margin-left: 15px;
}

 

:first-line
:first-letter

Drop cap styling example

p:first-letter {
  float: left;
  font-size: 80px;
  color: white;
  padding: 5px 10px;
  background: #384047;
  maring: 10px 10px 0;
  maring-left: 0;
  border-radius: 5px;
  line-height: 1;
}

 

:[att=val]

Substring Matching Attribute Selectors

[att=val]the attribute matching selector
[att^=val]thebegins withselector
[att$=val]theends withselector
[att*=val]thecontainsselector

When might be a good time to take advantage of substring matching attribute selectors or structural pseudo-classes?
When using a content management system or framework that gives us little––to no––access to the HTML.