Advanced Selectors

Question 1

[att^=”val”]

Answer 1

“begins with” selector

Question 2

[att$=”val”]

Answer 2

“ends with” selector

Question 3

[att*=”val”]

Answer 3

“contains” selector

Question 4

:nth-child(an+b)
:nth-child(even)
:nth-child(-n+4)
:nth-last-child(n+3)

Answer 4

• targets the even list items only
• targets the first 4 list items only
• targets the last 3 list items only

Question 5

:root

Answer 5

• selects the element that is the root of the document.
• this will usually be the HTML element because it is the root of our document
• more specificity than the HTML type selector

Question 6

:target

Answer 6

• targets an element only if its ID matches the hash in a URL
• fragment identifiers

Question 7

:empty

Answer 7

targets elements that have no child elements or content whatsoever

Question 8

:not()

Answer 8

negation pseudo-class that selects everything except the element we specify, and we can use it with just about any type of selector

Question 9

:enabled

Answer 9

selects UI elements that are in an enabled state

Question 10

:disabled

Answer 10

selects UI elements like buttons and form inputs that are in a disabled state

Question 11

:checked

Answer 11

selects UI elements that are in a checked state, such as a text box or a radio button

Question 12

::first-line

Answer 12

selects the first line of text rendered by the browser

Question 13

::first-letter

Answer 13

selects the very first character, or letter, of the first line of text

Question 14

::before and ::after

Answer 14

• inserts generated content into a page
• they both work the same way, except that one inserts the content before the element and the other inserts the content after
• for these pseudo-elements to work properly, we must use the content property
• at the very least the content property must contain an empty set of quotes as its value

Question 15

How is generated content rendered in the browser?

Answer 15

it appears as child content before or after an element’s content

Question 16

Y/N: Should we use quotes around the content property’s value if we’re defining a function, such as url() or attr()?

Answer 16

No