IES: CSS-deck 2 Flashcards
1
Q
Combinators
A
- allows selectors to be combined
- Allows the selection of elements relative to other elements in the HTML doc
- Provides 4 options: descendant, child, adjacent sibling, and general siblings
2
Q
combinator options
A
- descendant
- Child
- Adjacent sibling
- General sibling
3
Q
combinator: descendant
A
- selects all elements that are sentence of a parent element descendants of a parent element
- (parent element specified) (space) (The Descendant element)
- Example: (div p { }) : selects all
<p>
s within a<div>
at any level of descendancy - Multiple descendants can be specified: (Ex. div p span { })
4
Q
combinator: child
A
- selects all children elements of a parent element
- (parent element specified) ( > ) (child element specified)
- Example: (div > p { }) : selects all
<p>
s whose direct parent is a<div>
5
Q
combinator: adjacent sibling
A
- selects all adjacent sibling elements immediately following
- (sibling element specified) ( + ) (immediately following sibling element specified)
- Example: (div + p { }) : selects all
<p>
s placed immediately after each<div>
6
Q
combinator: General sibling
A
- selects all next/following siblings of a specified element
- (sibling element specified) ( ~ ) (all next/following specified siblings)
- Example: (div ~ p { }) : selects all
<p>
s placed next/following a<div>
7
Q
attribute selectors
A
- CSS selectors can target elements with specific attributes or particular attribute values
- Attribute selectors have 7 options: attribute name, attribute value, attribute value item, attribute first word, attribute substring, attribute first substring, attribute final substring
8
Q
attribute name selector
A
- selects all elements with a specified attribute
- states an element followed by an attribute name in Brackets ([ ])
- Example: ol[attribute ]
9
Q
attribute value selector
A
- selects all that have a specified attribute and a specified value
- Example: li[class= “value “]
10
Q
attribute value item selector
A
- selects all with a specified attribute and a list of values containing a specialized word
- li[ class~=”item” ]
11
Q
attribute first word selector
A
- Selects all with a specified attribute and a value that begins with a specified word
- li[ class|=”word” ]
- Only selects if the attribute value is a single whole word or hyphenated word
12
Q
attribute substring selector
A
- space for selects all with a specified attribute and a value that includes a specified substring anywhere within
- li[ class=”substring” ]
- The specified value doesn’t need to be a whole word
13
Q
attribute first substring selector
A
- selects all with a specified attribute and a value beginning with a specified substring anywhere
- li[ class^=”substring” ]
- The specified value doesn’t need to be a whole word
14
Q
attribute final substring selector
A
- selects all that have a specified attribute and a value that ends with a specified substring anywhere
- li[ class$=”substring” ]
- The specified value doesn’t need to be a whole word
15
Q
Select or importance defining categories: (in order of importance)
A
- inline
- Identity
- Class, attribute
- Element
16
Q
style rule importance: inline
A
- first in importance
- Style rule declared directly within an element
- Example: style=”color: white;”
- Specificity value of 1, 0, 0, 0
17
Q
style rule importance: identity
A
- second in importance
- Selector targets an id attribute
- Example: h2#header
- specificity value of 0, 1, 0, 0
18
Q
style rule importance: class, attribute
A
- selector targets the class or [attribute]
- Example: h2.head find
- Specificity value of 0, 0, 1, 0
19
Q
style rule importance: element (or pseudo element)
A
- selector targets an element type
- Example: h2
- Specificity value of 0, 0, 0, 1
20
Q
Same specificity value or weight rating
A
- if two selectors of the same specificity value have the same target, the “latest rule counts”: the lower rule in the style sheet will be applied.