CSS | Attribute Selectors.css

/* Target an element by any of its HTML attributes and values. */
div[id="container"] {
    max-width: 500px;
    margin: auto;
}

[class] {
    border: solid 1px #ccc;
}

[class="form-contact"] {
    border: solid 1px #ccc;
}

form[class="form-contact"] {
    border: solid 1px #ccc;
}

input[type="submit"] {
    background-color: green;
}

a[target="_blank"] {
    color: tomato;
}

/* List items that are children of the "my-things" list */
ul.my-things > li {
    margin: 2em;
}

/* Paragraphs that come immediately after any image */
img + p {
    font-style: bold;
}

/* Paragraphs that are siblings of and subsequent to any image */
img ~ p {
    color: red;
}

div:first-child {
    margin-left: 0;
}

li:last-child {
    float: right;
}

div span:only-child {
    font-size: .5em;
}

li:empty{
    background-color: red;
}

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}


/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}


/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements that begins with http:// */
a[href^="http://"]{
    color: red;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}



li:nth-child(odd) {
    background: blue;
}

li:nth-child(even) {
    background: blue;
}

li:nth-child(3) {
    background: blue;
}

li:nth-child(3n) {
    background: blue;
}

li:nth-child(3n+4) {
    background: blue;
}

li:nth-child(-n+4) {
    background: blue;
}

div:nth-of-type(4) {
    background: #52bab3;
}

div:nth-of-type(even) {
    background: #52bab3;
}

div:nth-last-of-type(1) {
    background: #52bab3;
}

:root{
    background: red;
}

:target {
    background: blue;
}

#col-c:target {
    background-yellow;
}

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

input:not([type="submit"]){
    box-shadow: insert 0 2px 0 rgba(0, 0, 0, .15);
}

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

p::first-line{
    font-weight: bold;
}

p::first-letter{
    font-size: 2rem;
    float: left;
    padding: 5px 10px;
}

.test::before {
    content: "JPG -";
    color: red;
}


.test::after {
    content: url(img.png);
    color: green;
}

a::after {
    content: attr(title);
}