CSS Selectors

Question 1

What will this selector target?

.intro {
color: blue
{

Answer 1

Selects all elements with class=”intro”

Question 2

What will this selector target?

#firstname	 {
color: blue
 {

Answer 2

Selects the element with id=”firstname”

Question 3

What will this selector target?

• {
  color: blue
  {

Answer 3

Selects all elements

Question 4

What will this selector target?

p {
color: blue
{

Answer 4

Selects all p elements p

Question 5

What will this selector target?

div, p {
color: blue
{

Answer 5

Selects all div elements and all p elements

Question 6

What will this selector target?

div > p {
color: blue
{

Answer 6

Selects all p elements where the parent is a div> element

Question 7

What will this selector target?

div + p {
color: blue
{

Answer 7

Selects all p> elements that are placed immediately after div> elements

Question 8

What will this selector target?

p ~ ul {
color: blue
{

Answer 8

Selects every ul> element that are preceded by a p> element

Question 9

What will this selector target?

[target] {
color: blue
{

Answer 9

Selects all elements with a target attribute

Question 10

What will this selector target?

[target=_blank] {
color: blue
{

Answer 10

Selects all elements with target=”_blank”

Question 11

What will this selector target?

[title~=flower] {
color: blue
{

Answer 11

Selects all elements with a title attribute containing the word “flower”

Question 12

What will this selector target?

[lang|=en] {
color: blue
{

Answer 12

Selects all elements with a lang attribute value starting with “en”

Question 13

What will this selector target?

a[href^=”https”] {
color: blue
{

Answer 13

Selects every a> element whose href attribute value begins with “https”

Question 14

What will this selector target?

a[href$=”.pdf”] {
color: blue
{

Answer 14

Selects every a> element whose href attribute value ends with “.pdf”

Question 15

What will this selector target?

a[href*=”w3schools”] {
color: blue
{

Answer 15

Selects every a> element whose href attribute value contains the substring “w3schools”

Question 16

What will this selector target?

a:active {
color: blue
{

Answer 16

Selects the active link

Question 17

What will this selector target?

p::after {
color: blue
{

Answer 17

Insert something after the content of each p> element

Question 18

What will this selector target?

p::before {
color: blue
{

Answer 18

Insert something before the content of each p> element

Question 19

What will this selector target?

input:checked {
color: blue
{

Answer 19

Selects every checked input> element

Question 20

What will this selector target?

input:disabled {
color: blue
{

Answer 20

Selects every disabled input> element

Question 21

What will this selector target?

p:empty {
color: blue
{

Answer 21

Selects every p> element that has no children (including text nodes)

Question 22

What will this selector target?

input:enabled {
color: blue
{

Answer 22

Selects every enabled input> element

Question 23

What will this selector target?

p:first-child {
color: blue
{

Answer 23

Selects every p> element that is the first child of its parent

Question 24

What will this selector target?

p::first-letter {
color: blue
{

Answer 24

Selects the first letter of every p> element

Question 25

What will this selector target? p::first-line { color: blue            {

Answer 25

Selects the first line of every p> element

Question 26

What will this selector target? p:first-of-type { color: blue            {

Answer 26

Selects every p> element that is the first p> element of its parent

Question 27

What will this selector target? input:focus { color: blue            {

Answer 27

Selects the input element which has focus

Question 28

What will this selector target? a:hover { color: blue            {

Answer 28

Selects links on mouse over

Question 29

What will this selector target? input:in-range { color: blue            {

Answer 29

Selects input elements with a value within a specified range

Question 30

What will this selector target? input:invalid { color: blue            {

Answer 30

Selects all input elements with an invalid value

Question 31

What will this selector target? p:lang(it) { color: blue            {

Answer 31

Selects every p> element with a lang attribute equal to "it" (Italian)

Question 32

What will this selector target? p:last-child { color: blue            {

Answer 32

Selects every p> element that is the last child of its parent

Question 33

What will this selector target? p:last-of-type { color: blue            {

Answer 33

Selects every p> element that is the last p> element of its parent

Question 34

What will this selector target? a:link { color: blue            {

Answer 34

Selects all unvisited links

Question 35

What will this selector target? :not(p) { color: blue            {

Answer 35

Selects every element that is not a p> element

Question 36

What will this selector target? p:nth-child(2) { color: blue            {

Answer 36

Selects every p> element that is the second child of its parent

Question 37

What will this selector target? p:nth-last-child(2) { color: blue            {

Answer 37

Selects every p> element that is the second child of its parent, counting from the last child

Question 38

What will this selector target? p:nth-last-of-type(2) { color: blue            {

Answer 38

Selects every p> element that is the second p> element of its parent, counting from the last child

Question 39

What will this selector target? p:nth-of-type(2) { color: blue            {

Answer 39

Selects every p> element that is the second p> element of its parent

Question 40

What will this selector target? p:only-of-type { color: blue            {

Answer 40

Selects every p> element that is the only p> element of its parent

Question 41

What will this selector target? p:only-child { color: blue            {

Answer 41

Selects every p> element that is the only child of its parent

Question 42

What will this selector target? input:optional { color: blue            {

Answer 42

Selects input elements with no "required" attribute

Question 43

What will this selector target? input:out-of-range { color: blue            {

Answer 43

Selects input elements with a value outside a specified range

Question 44

What will this selector target? input:read-only { color: blue            {

Answer 44

Selects input elements with the "readonly" attribute specified

Question 45

What will this selector target? input:read-write { color: blue            {

Answer 45

Selects input elements with the "readonly" attribute NOT specified

Question 46

What will this selector target? input:required { color: blue            {

Answer 46

Selects input elements with the "required" attribute specified

Question 47

What will this selector target? :root { color: blue            {

Answer 47

Selects the document's root element

Question 48

What will this selector target? ::selection { color: blue            {

Answer 48

Selects the portion of an element that is selected by a user

Question 49

What will this selector target? ``` #news:target { color: blue            { ```

Answer 49

Selects the current active #news element (clicked on a URL containing that anchor name)

Question 50

What will this selector target? input:valid { color: blue            {

Answer 50

Selects all input elements with a valid value

Question 51

What will this selector target? a:visited { color: blue            {

Answer 51

Selects all visited links