Level-3 selectors

Selectors help to target specific elements without adding ids and classes in html

Child selectors

Child selector: E > F
All F that are children of E

.sommaire_catalogue>li{
  background:url(folder.png) no-repeat;
}

Adjacent sibling combinator: E + F
an element F immediately preceded by E

h1+p{
  font-weight:bold;
  color:#777;
  font-size:1.3em;
  padding:1em;
}

General sibling combinator: E ~ F
an element F preceded by sibling element E
(i.e., with the same parent)

#french ~ p {
  font-weight:bold;
  color:#077;
  font-size:1.4em;
  padding-left:1em;
}

Attribute selector: E[foo]
an element E with a foo attribute

img[alt]{
  border:10px rgb(147,103,94) solid;
  border-radius:10px;
}

Attribute selector: E:not(s)
an element E that does not match s

img:not([alt]){
	border:10px rgb(147,103,94) solid;
	border-radius:10px;
}

Attribute selector: E[foo*="bar"]
an element E whose foo attribute contains the string bar

a[href*="glossaire"]{
	color:gray;
}

Attribute selector: E[foo^="bar"]
an element E whose foo attribute begins with the text bar

a[href^="http:"]{
	color:#6996d3;
	padding-left:1em;
	text-decoration:none;
}

Attribute selector: E[foo$="bar"]
an element E whose foo attribute ends with the string bar

a[href$=".pdf"]::after {
	content:url(pictopdf.gif)
	vertical-align: -20px;
}

E:first-child
an element E that is the first child of its parent

th:first-child {
	border-left: none;
	text-align: left }
th:nth-child(1) {            /* same! */
	border-left: none;
	text-align: left }

E:last-of-type
an element E that is the last child of its type in its parent

th:last-of-type{
	border-bottom:none;
}

E:nth-child(2n+4)
each 2nd E element beginning with the 4th child of its parent

td:nth-child(2n + 4){
	background:rgba(29, 53, 91, .3);
}

Note: No space between the number and the n

E:nth-child(odd)
same as nth-child(2n+1)

E:nth-child(even)
same as nth-child(2n+2)

td:nth-child(odd){
	background:orange;
}

:empty
an empty element

th:empty, td:empty{
	background:rgba(253,143,149, .5);
}

:target
the element that is targeted by the fragment ID on the current document's URL

:target{
	border:4px gold solid;
}

<a href="#grant">Un gringo...</a>
<figure id="grant">I'm targeted when the 
user clicks on the link
</figure>