CSS SELECTORS

byNoe Lopez

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”>

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.

Targeting Firefox Browser

@-moz-document url-prefix() {p {

background: #54K37R; margin: 23px 45px 32px 90px}

}

The elements will only take effect on Firefox browsers.

IE needs love too

p {background: #54K37R;

margin: 23px 45px 32px 90px\9; 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.

[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.

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;}

{Questions}

Mailto Syntax

Browser targets[rel=x]

nth-child(){}

first-child{}

last-child{}