Selectors

Question 1

How to select the first paragraph of an article ?

Answer 1

article p:first-of-type {

}

Question 2

What are the parts of a css rule ?

Answer 2

• A selector or a set of selectors
• A set of declarations enclosed within curly brackets. Each declaction is formed by a key/value pair where the key is also called the property.

Question 3

What is the universal selector ?

Answer 3

A universal selector—also known as a wildcard—matches any element.

it is the star symbol (*).

Question 4

What is a type selector ?

Answer 4

A type selector matches a HTML element directly.

example: section, article, p, etc.

Question 5

What is a class selector ?

Answer 5

A class selector matches any element that has that class applied to it.

A class selector starts with a dot (.) followed by the name of the class to select.

Question 6

What is an ID selector ?

Answer 6

An ID selector matches the only element on a page with that ID value.

An ID selector starts with a sharp(#) followed by id to select.

Question 7

What is an attribute selector ?

Answer 7

An attribute selector matches elements that have a certain HTML attribute, or have a certain value for an HTML attribute

Question 7

What is an attribute selector ?

Answer 7

An attribute selector matches elements that have a certain HTML attribute, or have a certain value for an HTML attribute

Question 7

What is an attribute selector ?

Answer 7

An attribute selector matches elements that have a certain HTML attribute, or have a certain value for an HTML attribute

Question 7

What is an attribute selector ?

Answer 7

An attribute selector matches elements that have a certain HTML attribute, or have a certain value for an HTML attribute

Example:

[data-type=’primary’] {
color: red;
}

[data-type] {
color: red;
}

Question 8

What is an attribute selector ?

Answer 8

An attribute selector matches elements that have a certain HTML attribute, or have a certain value for an HTML attribute

Question 9

How to make attribute selector case sensitive ?

Answer 9

by adding an s operator to your attribute selector.

Exemple:

[data-type=’primary’ s] {
color: red;
}

Question 10

How to make attribute selector case insensitive ?

Answer 10

by adding an i operator to your attribute selector.

Exemple:

[data-type=’primary’ i] {
color: red;
}

Question 11

How to make an attribute selector match an attribute value that contains a string ?

Answer 11

Use the operator *=

/* A href that contains “example.com” /
[href=’example.com’] {
color: red;
}

Question 12

How to make an attribute selector match an attribute value that starts with a string ?

Answer 12

Use the operator ^=

/* A href that starts with https */
[href^=’https’] {
color: green;
}

Question 13

How to make an attribute selector match an attribute value that ends with a string ?

Answer 13

Use the operator $=

/* A href that starts with https */
[href$=’https’] {
color: green;
}

Question 14

What is the difference between pseudo-elements and pseudo-classes ?

Answer 14

Pseudo-elements differ from pseudo-classes because instead of responding to the platform state, they act as if they are inserting a new element with CSS. Pseudo-elements are also syntactically different from pseudo-classes, because instead of using a single colon (:), we use a double colon (::).

Question 15

How to insert content at the start of an element using css ?

Answer 15

.my-element::before {
content: ‘Prefix - ‘;
}

Question 16

How to style bullet points of an html list ?

Answer 16

/* Your list will now either have red dots, or red numbers */
li::marker {
color: red;
}

Question 17

How to style a content that has been highlighted by the user ?

Answer 17

::selection {
background: black;
color: white;
}

Question 18

What is a css combinator ?

Answer 18

A combinator is what sits between two selectors. For example, if the selector was p > strong, the combinator is the > character.

Question 19

What is the descendant combinator ?

Answer 19

It is the space “ “
A descendant combinator allows us to target a child element. This uses a space ( ) to instruct the browser to look for child elements.
The descendant combinator is recursive.

Example:

p strong {
color: blue;
}

Question 20

What is the Next sibling combinator ?

Answer 20

it is the plus sign “+”

The next sibling combinator allows us to target an element that immediately follows another element

Question 21

What is the Subsequent- sibling combinator ?

Answer 21

It is the tild sign “~”

The subsequent sibling combinator allows us to target an element that just has to follow another element with the same parent, rather than being the next element with the same parent.

Question 22

What is the Child combinator ?

Answer 22

It is the superior sign (>)

It allows you more control over the recursion that comes with combinator selectors. By using the > character, you limit the combinator selector to apply only to direct children.

Question 23

What is a compound combinator ?

Answer 23

When 2 or more selectors are used together, without a combinator, in order to create a more specific selector.