CSS Pseudo-classes and pseudo-elements

Question 1

What are pseudo-classes?

Answer 1

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus

Question 2

What is the syntax of pseudo classes?

Answer 2

selector:pseudo-class {property: value;}

Question 3

Which pseudo-class selects active links?

Answer 3

a:active

Question 4

Which pseudo-class selects every checked element?

Answer 4

:checked

Ex: input:checked

Selects every checked <input></input> element.

:checked works for:

• radio (<input></input>),
• checkbox (<input></input>)
• option (<option> in a <select>) </select>
  </option>

Question 5

Which pseudo-class selects every disabled element?

Answer 5

:disabled

Ex: input:disabled

Selects every disabled <input></input> element

Question 6

Which pseudo-class selects every element that has no children?

Answer 6

:empty

Ex: p:empty

Selects every

element that has no children

Question 7

Which pseudo-class selects every enabled element?

Answer 7

:enabled

Ex: input:enabled

Selects every enabled <input></input> element

Question 8

Which pseudo-class selects every elements that is the first child of its parent?

Answer 8

:first-child

Ex: p:first-child

Selects every

elements that is the first child of its parent

Question 9

Which pseudo-class selects every element that is the first child, of a particular type, of its parent?

Answer 9

:first-of-type

Ex: p:first-of-type

Question 10

What are pseudo-classes and pseudo-elements and what are their syntax?

Answer 10

Both are appended to selectors but we can distinguish them since CSS3 with single or double colon:

• selector :pseudo-class—> targets aspecific state/part of the element
• selector::pseudo-element—> targets aspecific part of the element beyond what is specified in the document (not actually in the DOM tree of objects)

Ex:

:last-child / :first-of-type / :nth-child(n) –> are accessible in the DOM. They are pseudo-classes.

::after / ::before / ::first-letter / ::first-line –> are not accessible objects in the DOM. They are pseudo-elements.