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;
30 Cards in this Set
- Front
- Back
|
combinator |
something explains relationship b/w (CSS) selector: (i) descendant selector - " " (space) (ii) child selector - ">" (iii) adjacent sibling selector - "+" (iv) general sibling selector - "~" |
|
|
descendant [ ] selector |
" " (space) - matches all descendant elements [2nd] of specified element [1st]
ex. selects all <p> inside <div>: <style> div p { background-color: yellow; } </style> </head> <body> <div> <p>Paragraph 1 in the div.</p> <p>Paragraph 2 in the div.</p> <section><p>Paragraph 3 in the div.</p></section> </div> <p>Paragraph 4. Not in a div.</p> <p>Paragraph 5. Not in a div.</p>
|
|
|
child [>] selector |
">" - selects all immediate children elements of specified element.
ex. selects all <p> are immediate children a <div>: <style> div > p { background-color: yellow; } </style> </head> <body> <div> <p>Paragraph 1 in the div.</p> <p>Paragraph 2 in the div.</p> <section><p>Paragraph 3 in the div.</p></section> <!-- not Child but Descendant --> </div> <p>Paragraph 4. Not in a div.</p> <p>Paragraph 5. Not in a div.</p>
|
|
|
adjacent sibling [+] selector
|
"+" - selects all adjacent siblings elements of specified element. ## sibling elements must have same parent element
ex. selects all <p> immediately after <div>: <style> div + p { background-color: yellow; } </style> </head> <body> <div> <p>Paragraph 1 in the div.</p> <p>Paragraph 2 in the div.</p> </div> <p>Paragraph 3. Not in a div.</p> <p>Paragraph 4. Not in a div.</p> |
|
|
general sibling [~] selector |
"~" - selects sibling (share same parent) elements of specified element.
ex. selects all <p> siblings of <div>: <style> div ~ p { background-color: yellow; } </style> </head> <body> <p>Paragraph 1.</p> <div> <p>Paragraph 2.</p> </div> <p>Paragraph 3.</p> <code>Some code.</code> <p>Paragraph 4.</p>
|
|
|
Change color all <p> descendants of <div>'s, to "red". |
div p { color: red;} |
|
|
Change color all <p> are immediate children <div> to "red". |
div > p { color: red;} |
|
|
Change color <p> elements are siblings a <div> to "red". |
div ~ p { color: red;} |
|
|
Change color <p> elements adjacent (immediately following) <div> to "red". |
div + p { color: red;} |
|
|
pseudo-classes |
selector:pseudo-class { property:value; } used define a special state an element.
ex. a:unvisited, div:hover
|
|
|
Pseudo-classes can combined w/ CSS classes
ex. a.highlight:hover { color: #ff0000; } |
example of using the :hover pseudo-class on a <div> element
div:hover { background-color: blue; } |
|
|
:first-child pseudo-class |
matches specified element that's first child another element.
ex. selector matches any <p> that's first child any element: p:first-child { color: blue; } |
|
selector matches 1st <i> all <p> elements:
ex. p i:first-child { color: blue; } |
selector matches all <i> in <p> elements that are 1stchild another element:
ex. p:first-child i { color: blue; } |
|
|
Change background color, when user hovers over p elements, w/ class "highlight", to "lightblue". |
p.highlight:hover { background-color: lightblue; } |
|
|
Set background color <p> that are 1st child of any element, to "lightblue" |
p:first-child { background-color: light-blue; } |
|
|
Set background color <input> that are in focus (clicked or active), to "lightblue". |
input:focus { background-color: lightblue; } |
|
|
pseudo-element |
selector::pseudo-element { property:value; } style specified parts an element. ## double colon (::) used distinguish pseudo-elements from pseudo-classes (:)
ex. style 1st letter an element, Insert content before, or after, element content
|
|
|
::first-line pseudo-element |
adds special style 1st line a text. ## only applicable block-level elements ## following properties apply: i. font properties ii. color properties iii. background properties iv. word-spacing v. letter-spacing vi. text-decoration vii. vertical-align viii. text-transform ix. line-height x. clear
ex. p::first-line { color: #ff0000; font-variant: small-caps; } </style> </head> <body> <p>I'm into gay sex. When I write in black I'm lying. The first line is not true. </p>
|
|
|
::first-letter |
adds special style 1st letter of a text ## following properties apply: i. font properties ii. color properties iii. background properties iv. margin properties v. padding properties vi. border properties vii. text-decoration viii. vertical-align (only if "float" is "none") ix. text-transform x. line-height xi. float xii. clear
ex. p::first-letter { color: #ff0000; font-size: xx-large; } </style> </head> <body> <p>I like playing in Jordan's</p> </body>
|
|
Pseudo-elements can be combined with CSS classes |
Several pseudo-elements can also be combined. |
|
|
::before |
used insert some content before content an element.
ex. h1::before { content: url(smiley.gif); } </style> </head> <body>
<h1>Do you like Gay Sex?</h1> <h1>Hello? Dad?</h1>
</body> |
|
|
::after |
used insert some content after content an element. ex. h1::after { content: url(smiley.gif); } </style> </head> <body> <h1>gay</h1> <h1>sex</h1> |
|
All CSS Pseudo Elements |
All CSS Pseudo Classes |
|
|
::selection |
matches portion an element selected by user. ## can be applied to: i. color ii. background iii. cursor iv. outline
ex. ::-moz-selection { /* Code for Firefox */ color: red; background: yellow; } ::selection { color: red; background: yellow; } </style> </head> <body> <h1>Select some text on this page</h1> <p>This is a paragraph.</p> <div>This is some text in a div element.</div> </body> |
|
|
Set text color to red, for 1st line <p> element. |
p::first-line { color: red; } |
|
|
Set text color to "red", & text size to "xx-large", for 1st letter <p> element. |
p::first-letter { color: red; font-size: xx-large; } |
|
|
Insert image "smiley.gif" before & after <p> elements (w/ pseudo-elements) |
p::before { content: url(smiley.gif); } p::after { content: url(smiley.gif); } |
|
|
opacity property |
specifies opacity/transparency an element ## 1.0 (default) to 0 (transparent)
ex. img { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ } </style> </head> <body> <p>Image with 50% opacity:</p> <img src="img_forest.jpg" alt="Forest" width="170" height="100"> </body> |
|
|
|
|
|
Remove transparency/opacity <img> element when user hovers over it img { opacity: 0.4; } |
img:hover { opacity: 1; } |
