CSS - Selectors

Question 1

:link

Answer 1

The:linkselector is used to select unvisited links.

Note:The :link selector does not style links you have already visited.

Question 2

:visited

Answer 2

The:visitedselector is used to select visited links.

a:visited{
color:pink;
}

Question 3

:hover

Answer 3

Select and style a link when you mouse over it:

a:hover{
background-color:yellow;
}

Question 4

:active

Answer 4

Select and style the active link:

a:active{
background-color:yellow;
}

Question 5

element>element

Answer 5

Select and style every <p> element where the parent is a </p><div> element:

div > p{
background-color:yellow;
}

</div>

Question 6

element+element

Answer 6

Select and style the first <p> element that are placed immediately after </p><div> elements:

div + p{
background-color:yellow;
}

</div>

Question 7

element1~element2

Answer 7

Set a background color for all <ul> elements that are preceded by a <p> element with the same parent:

p ~ ul{
background:#ff0000;
}

</p></ul>

Question 8

[attribute]

Answer 8

Style all <a> elements with a target attribute:</a>

a[target]{
background-color:yellow;
}

</a>

Question 9

[attribute=value]

Answer 9

Style <a> elements with a target=”_blank”:</a>

a[target=_blank]{
background-color:yellow;
}

</a>

Question 10

[attribute~=value]

Answer 10

Select and style elements with a title attribute containing the word “flower”:

[title~=flower]{
background-color:yellow;
}

Question 11

[attribute|=value]

Answer 11

Select and style elements, where the lang attribute’s value starts with “en”:

[lang|=en]{
background-color:yellow;
}

Question 12

[attribute^=value]

Answer 12

Set a background color on all <div> elements that have a class attribute value that begins with “test”:

div[class^=”test”]{
background:#ffff00;
}

</div>

Question 13

[attribute$=value]

Answer 13

Set a background color on all <div> elements that have a class attribute value that ends with “test”:

div[class$=”test”]{
background:#ffff00;
}

</div>

Question 14

[attribute*=value]

Answer 14

Set a background color on all <div> elements that have a class attribute value containing “test”:

div[class*=”test”]{
background:#ffff00;
}

</div>

Question 15

::after

Answer 15

Insert some text after the content of each <p> element:

p::after{
content:” - Remember this”;
}

</p>

Question 16

::before

Answer 16

Insert some text before the content of each <p> element:

p::before{
content:”Read this: “;
}

</p>

Question 17

:checked

Answer 17

Set the height and width for all checked elements:

input:checked{
height:50px;
width:50px;
}

Question 18

:default

Answer 18

Add a red shadow color to the default input element:

input:default{
box-shadow:0 0 1px 1px red;
}

Question 19

:disabled

Answer 19

Set a background color for all disabled input elements of type=”text”:

input[type=”text”]:disabled{
background:#dddddd;
}

Question 20

:empty

Answer 20

Specify a background color for empty <p> elements:

p:empty{
background:#ff0000;
}

</p>

Question 21

:enabled

Answer 21

Set a background color for all enabled elements of type=”text”:

input[type=”text”]:enabled{
background:#ffff00;
}

Question 22

:first-child

Answer 22

Select and style every <p> element that is the first child of its parent:

p:first-child{
background-color:yellow;
}

</p>

Question 23

::first-letter

Answer 23

Select and style the first letter of every <p> element:

p::first-letter{
font-size:200%;
color:#8A2BE2;
}

</p>

Question 24

::first-line

Answer 24

Select and style the first line of every <p> element:

p::first-line{
background-color:yellow;
}

</p>

Question 25

:first-of-type

Answer 25

Specify a background color for the first

element of its parent: p:first-of-type {   background: red; }

Question 26

:focus

Answer 26

Select and style an input field when it gets focus: input:focus {   background-color: yellow; }

Question 27

:fullscreen

Answer 27

Set the background color to yellow when the page is in full-screen mode: :fullscreen {   background-color: yellow; }

Question 28

:hover

Answer 28

Select and style a link when you mouse over it: a:hover {   background-color: yellow; }

Question 29

:in-range

Answer 29

Select and style only if the value of the element is "in range": input:in-range {   border: 2px solid yellow; }

Question 30

:indeterminate

Answer 30

Add a red shadow color to indeterminate inputs: input:indeterminate {   box-shadow: 0 0 1px 1px red; }

Question 31

:invalid

Answer 31

Select and style only if the value of the element is invalid: input:invalid {   border: 2px solid red; }

Question 32

:lang

Answer 32

Select and style every

element with a lang attribute value equal to "it" (Italian): p:lang(it) {   background: yellow; }

Question 33

:last-child

Answer 33

Specify a background color for the

element that is the last child of its parent: p:last-child {   background: #ff0000; }

Question 34

:last-of-type

Answer 34

Specify a background color for the last

element of its parent: p:last-of-type {   background: #ff0000; }

Question 35

:link

Answer 35

Select and style unvisited links: a:link {   background-color: yellow; }

Question 36

::marker

Answer 36

Style the markers of list items: ::marker {   color: red; }

Question 37

:not

Answer 37

Set a background color for all elements that are not a

element: :not(p) {   background: #ff0000; }

Question 38

:nth-child()

Answer 38

How to use the :nth-child() selector: ``` /* Selects the second element of div siblings */ div:nth-child(2) {   background: red; } ``` ``` /* Selects the second li element in a list */ li:nth-child(2) {   background: lightgreen; } ``` ``` /* Selects every third element among any group of siblings */ :nth-child(3) {   background: yellow; } ```

Question 39

:nth-last-child()

Answer 39

Specify a background color for every

element that is the second child of its parent, counting from the last child: p:nth-last-child(2) {   background: red; }

Question 40

:nth-last-of-type()

Answer 40

Specify a background color for every

element that is the second p element of its parent, counting from the last child: p:nth-last-of-type(2) {   background: red; }

Question 41

:nth-of-type()

Answer 41

How to use the :nth-of-type() selector: ``` /* Selects the second element of div siblings */ div:nth-of-type(2) {   background: red; } ``` ``` /* Selects the second li element in a list */ li:nth-of-type(2) {   background: lightgreen; } ``` ``` /* Selects every third element among any group of siblings */ :nth-of-type(3) {   background: yellow; } ```

Question 42

:only-of-type

Answer 42

Specify a background color for every

element that is the only child of its type, of its parent: p:only-of-type {   background: #ff0000; }

Question 43

:only-child

Answer 43

Specify a background color for every

element that is the only child of its parent: p:only-child {   background: #ff0000; }

Question 44

:optional

Answer 44

Select and style only if the element does not have a "required" attribute: input:optional {   background-color: yellow; }

Question 45

:out-of-range

Answer 45

Select and style only if the value of the element is "out of range": input:out-of-range {   border: 2px solid red; }

Question 46

::placeholder

Answer 46

Change the color of the placeholder text of an input field: ::-webkit-input-placeholder { /* Edge */   color: red; } :-ms-input-placeholder { /* Internet Explorer 10-11 */   color: red; } ::placeholder {   color: red; }

Question 47

:read-only

Answer 47

Select and style only if the input element is "readonly": input:read-only {   background-color: yellow; }

Question 48

:read-write

Answer 48

Select and style only if the input element is not "readonly": input:read-write {   background-color: yellow; }

Question 49

:required

Answer 49

Select and style only if the element has a "required" attribute: input:required {   background-color: yellow; }

Question 50

:root

Answer 50

Set the background color for the HTML document: :root {   background: #ff0000; }

Question 51

::selection

Answer 51

Make the selected text red on a yellow background: ::selection {   color: red;   background: yellow; }

Question 52

:target

Answer 52

Highlight active HTML anchor: :target {   border: 2px solid #D4D4D4;   background-color: #e5eecc; }

Question 53

:valid

Answer 53

Select and style only if the value of the element is valid: input:valid {   background-color: yellow; }

Question 54

:visited

Answer 54

Select and style visited links: a:visited {   color: pink; }

Question 55

element element

Answer 55

Select and style every

element that is inside

elements: div p {   background-color: yellow; }

Question 56

element,element

Answer 56

Select and style all

elements AND all

elements: h2, p {   background-color: yellow; }

Question 57

element.class

Answer 57

Select and style every

element with the class "intro": p.intro {   background-color: yellow; }

Question 58

element

Answer 58

Select and style all

elements: p {   background-color: yellow; }

Question 59

*

Answer 59

Select all elements, and set their background color to yellow: * {     background-color: yellow; }

Question 60

#id

Answer 60

Style the element with id="firstname": ``` #firstname {   background-color: yellow; } ```

Question 61

.class

Answer 61

Select and style all elements with class="intro": .intro {   background-color: yellow; }