Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
4 Cards in this Set
- Front
- Back
|
Attribute Selector: name Five Ways Of Selecting Name p[name] p[name=""] p[name^=""] p[name$=""] p[name*=""] |
index.html
<body> <p name="tasha">My name is Tasha</p> <p>No Name</p> <p>No Name</p> </body>
main.css
Any p with a name gets effected
p[name]{ color:blue; }
Any p with a name="tasha" gets effected
p[name="tasha"]{ color:red; }
Any p that begins with "tas" gets effected
p[name^="tas"]{ color:green; }
Any p that ends with "ha" gets effected
p[name$="ha"]{ color:purple; }
Any p that has "tasha" in its name gets effected
p[name*="tasha"]{ color:orange; } |
|
|
Pseudoclasses The Three Ways of using :nth-child() |
<> parent <> child (inside parent)
index.html
<body> <div id="mommy"> <p class="tasha">I have a dog</p> <p class="tasha">her name is fluffy</p> <p class="tasha">she likes to play</p> </div> </body>
main.css
Target A Specific Child. This example effects the third child.
p:nth-child(3){ color:green; }
Effect the odd numbered or even numbered children. This example effects the odd children.
p:nth-child(odd){ color:red; }
You can also use a formula in format _n+_, This example effects every 4th child: 4, 8, 12, 16, etc.
p:nth-child(4n+1){ color:blue; } |
|
|
Negation Pseudo-class Excluding From CSS |
index.html
<div id="mommy"> <p class="tasha">I have a dog</p> <p class="other">her name is fluffy</p> <p class="tasha">she likes to play</p> </div>
main.css
* means effect everything
*{ color:blue; }
This means except things in the class="other" instead color red
:not(.other){ color:red; } |
|
|
CSS3 Selectors > + ~ |
> In example, this effects any paragraph that has a div as a parent
div>p{ color:blue; }
+ In example, this effects a paragraph that immediately follows another paragraph that has a class="tasha"
p.tasha+p{ color:red; }
~ This is just like + but doesn't need to immediately follow, you can have other things in between.
p.tasha~p{ color:green; } |
