IES: CSS-deck 2

Question 1

Combinators

Answer 1

• 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

Question 2

combinator options

Answer 2

• descendant
• Child
• Adjacent sibling
• General sibling

Question 3

combinator: descendant

Answer 3

• 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 { })

Question 4

combinator: child

Answer 4

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

Question 5

combinator: adjacent sibling

Answer 5

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

Question 6

combinator: General sibling

Answer 6

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

Question 7

attribute selectors

Answer 7

• 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

Question 8

attribute name selector

Answer 8

• selects all elements with a specified attribute
• states an element followed by an attribute name in Brackets ([ ])
• Example: ol[attribute ]

Question 9

attribute value selector

Answer 9

• selects all that have a specified attribute and a specified value
• Example: li[class= “value “]

Question 10

attribute value item selector

Answer 10

• selects all with a specified attribute and a list of values containing a specialized word
• li[ class~=”item” ]

Question 11

attribute first word selector

Answer 11

• 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

Question 12

attribute substring selector

Answer 12

• 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

Question 13

attribute first substring selector

Answer 13

• 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

Question 14

attribute final substring selector

Answer 14

• 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

Question 15

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

Answer 15

1. inline
2. Identity
3. Class, attribute
4. Element

Question 16

style rule importance: inline

Answer 16

• first in importance
• Style rule declared directly within an element
• Example: style=”color: white;”
• Specificity value of 1, 0, 0, 0

Question 17

style rule importance: identity

Answer 17

• second in importance
• Selector targets an id attribute
• Example: h2#header
• specificity value of 0, 1, 0, 0

Question 18

style rule importance: class, attribute

Answer 18

• selector targets the class or [attribute]
• Example: h2.head find
• Specificity value of 0, 0, 1, 0

Question 19

style rule importance: element (or pseudo element)

Answer 19

• selector targets an element type
• Example: h2
• Specificity value of 0, 0, 0, 1

Question 20

Same specificity value or weight rating

Answer 20

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