The document discusses different CSS selectors including mailto syntax for linking to multiple email recipients and including a subject line, targeting styles for specific browsers using media queries and browser prefixes, using rel attributes to target links, and nth-child pseudo-classes for styling elements based on their position among siblings. Examples are provided for mailto links, browser targeting of Chrome/Safari and Firefox, IE support, rel attributes, and using nth-child, first-child, and last-child to style specific paragraphs.

1. CSS SELECTORS
by
Noe Lopez

2. Mailto Syntax
<a href=”mailto:noe@gmail.com>
What everyone uses:
It works, but what if you want the email to go to more than 1
recipient, and include a subject line?
<a href=”mailto:noe@gmail.com,
noe@yahoo.com?subject=website-email”>

3. Targeting Chrome and Safari Browser
@media screen and (-webkit-min-device-pixel-ratio:0) {
body {
background: #54K37R;
}
}
The elements will only take effect on chrome and safari
browsers.

4. Targeting Firefox Browser
@-moz-document url-prefix() {
p {
background: #54K37R;
margin: 23px 45px 32px 90px
}
}
The elements will only take effect on Firefox browsers.

5. IE needs love too
p {
background: #54K37R;
margin: 23px 45px 32px 90px9;
margin: 23px 45px 32px 90px;
}
The elements will only take effect on Firefox browsers.
Well internet explorer you get love too, using a backslash
followed by a nine (9) after an element will automatically
target only ie browsers version 6 and up.

6. [rel=x]
<a rel=”external”> page title</a>
If no class or id is available using a simple “rel” element can
do the job.
a [rel=”extenal”] {
color: #561FDB;
text-transform: uppercase;
}
The rel elements can be really useful when targeting images,
and links within untouchable html.

7. Nth-Childs
nth-child is one of the most powerful elements in CSS. It can
be applied to any element in number sequence. In the example
the 3rd paragraph will be all upper case and have a different
background.
p:nth-child(3) {
background: #561FDB;
text-transform: uppercase;
}
p:last-child {
background: #F81256;
text-transform: uppercase;
}
p:first-child {
background: #1270F8;
text-transform: uppercase;
}

8. {Questions}
Mailto Syntax
Browser targets
[rel=x]
nth-child(){}
first-child{}
last-child{}