: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] – the “begins with” selector
[att$=val] – the “ends with” selector
[att*=val] – the “contains” selector
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.