CSS Selectors

Question 1

Type

Answer 1

1. p {
2. color: red;
3. }
   This selects an element of the specified type based directly on providing the element name.
4. <p>Lorem ipsum</p>

Question 2

Class

Answer 2

1. .thick {
2. font-weight: bold;
3. }
   This selects an element with matching class attribute name. This selector is indicated by the preceeding . dot (period).
4. <span>I’m thick</span>
   You can apply a class name to as many elements as you like across the same page and across any pages in your website. This is a good selector for sprinkling the same style to many different elements.
   You can also apply more than one class to the same element. For example, let’s apply two classes to the same paragraph.
5. .thick {
6. font-weight: bold;
7. }
9. .alert {
10. color: red;
11. }
    To apply the two classes we simply use a space to separate their names.
12. <p>Warning...</p>

Question 3

ID

Answer 3

1. # box {
2. background: blue;
3. }
   This selects an element with matching id attribute name. This selector is indicated by the preceeding # hashtag symbol.
4. <div>I'm a box</div>A single Id name should only be applied to one element per page.

Question 4

Compound

Answer 4

1. h1, h2, #box {
2. font-family: Arial, Helvetica, sans-serif;
3. }
   This selects all matched elements in the compound set. This selector is indicated by a , comma separating the selectors of the set. Each element within the comma separated list will be styled the same.
4. <h1>Heading</h1>
5. <h2>Subheading</h2>
6. <div>I'm a box</div>

Question 5

Descendent

Answer 5

1. # nav li {
2. background: blue;
3. }
   This selects an element that is nested inside of the specified parent element. This selector is indicated by a keyboard space between the parent and the child to be selected.
4. <ul>
   </ul>
5. <li>child</li>
6. </ul>

Question 6

Child

Answer 6

1. # list > li {
2. border: 1px solid black;
3. }
   This selects an element that is nested only one level deep inside of the specified parent element. It only selects direct children and not grandchildren. This selector is indicated by a > (greater than) symbol between the parent and the child to be selected.
4. <ul>
   </ul>
5. <li>child</li>
6. <li>child
   </li>
7. <ul>
   </ul>
8. <li>grand child</li>
9. </ul>
10. </li>
11. </ul>

Question 7

Adjacent Sibling

Answer 7

1. h3 + p {
2. color: green;
3. }
   This selects an element that appears directly after the former element assuming they are both siblings (in the same level of nesting, in the same parent). This selector is indicated by a + plus symbol between the former sibling and the selected element that follows.
4. <h3>Heading</h3>
5. <p>I'm a paragraph that is selected because I come directly after an h3.</p>
6. <p>I'm not selected.</p>

Question 8

General Sibling

Answer 8

1. h2 ~ p {
2. color: black;
3. }
   This selects all elements that appear directly after the former element. This selector is indicated by a ~ tilde symbol between the former sibling and the selected element that follows it.
4. <h2>Sub heading</h2>
5. <p>I'm selected because I appear after an h2.</p>
6. <p>I'm also selected for the same reason, in fact any paragraphs on the rest of the page after the h2 will be selected.</p>

Question 9

Universal

Answer 9

1. • {
2. color: orange;
3. }
   This selects elements where the properties specified have not been styled by any other selectors. This selector is indicated by an * asterisk symbol.
4. <h5>Sub heading</h5>We haven’t yet specified a color style for h5 anywhere else yet on our CSS so they will get the color orange now being covered under the universal selector.

Question 10

Attribute

Answer 10

1. img[alt=”Cat”] {
2. border: 1px solid black;
3. }
   This selects an element with a matching attribute value. This selector is indicated by [] square brackets, followed by the attribute property and value of the selected element within the brackets.
4. <img></img>

Question 11

a[href^=”http”] The ^= caret symbol and equals sign

Answer 11

select elements that start with the matching value, such as <a></a>

Question 12

href=”http://google.com”>google.

p[class$=”dog”] The $= dollar and equals signs

Answer 12

select elements that end with the matching value, such as <p class="bigbdog">….</p>

Question 13

img[alt*=”love”] The *= asterisk and equals sign

Answer 13

select elements that have the matched characters appearing anywhere within the value, such as <img></img>.

Question 14

p[class~=”monkey”] The ~= tilde symbol and equals sign

Answer 14

select elements that contain the term within a space separated value, such as <p class="zoo monkey details">…</p>.

Question 15

p[class|=”birds”] The |= pipe symbol selects

Answer 15

elements that contain the term within a dash separated value, such as <p class="new-birds-today">…</p>.

Question 16

Pseudo Class

Answer 16

1. a:link {
2. text-decoration: none;
3. }
   This selects an element based on the unique relationship or state described in the selector. This selector is indicated by the : colon symbol, followed by the pseudo class that describes the element’s state or positioning amongst other elements.
4. <a>About</a>

Question 17

a:link

Answer 17

selects links in their default state before the visitor has interacted with them.

Question 18

a:visited

Answer 18

selects links after the user has already clicked on them and is visiting that page again.

Question 19

a:hover

Answer 19

selects links when the user is hovering their mouse over the link.

Question 20

a:active

Answer 20

selects links for only the moment when the mouse button is pressed when clicking on the link.

Question 21

p:first-child

Answer 21

selects elements that are the first child when appearing inside a common parent. Such as <div><p>I’m selected</p><p>I’m not</p><p>Neither am I</p></div>

Question 22

p:last-child

Answer 22

selects elements that are the last child when appearing inside a common parent. Such as <div><p>I’m not selected</p><p>Neither am I</p><p>I’m selected</p></div>