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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

combinator options

A
  • descendant
  • Child
  • Adjacent sibling
  • General sibling
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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 { })
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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 ]
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

attribute value selector

A
  • selects all that have a specified attribute and a specified value
  • Example: li[class= “value “]
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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” ]
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Select or importance defining categories: (in order of importance)

A
  1. inline
  2. Identity
  3. Class, attribute
  4. Element
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.