Fundamentals of Front End Development MCQs with Answers
Practice important Fundamentals of Front End Development MCQs with answers and explanations.
Chapter: 43
Q501:
The `div ~ p` selector matches which elements?
A. <p> elements that are siblings of <div> elements.
B. <p> elements inside <div> elements.
C. <p> elements that are immediate children of <div> elements.
D. <p> elements that follow <div> elements.
Correct Answer:
A
Chapter: 44
Q502:
What does a pseudo-class define in CSS?
A. The layout of an element.
B. A special state of an element.
C. The width of an element.
D. The color of an element.
Correct Answer:
B
Chapter: 44
Q503:
Which pseudo-class styles a link when a user hovers over it?
A. :link
B. :visited
C. :hover
D. :active
Correct Answer:
C
Chapter: 44
Q504:
What color will an unvisited link be styled with according to the example?
A. #FF0000
B. #00FF00
C. #FF00FF
D. #0000FF
Correct Answer:
A
Chapter: 44
Q505:
Which pseudo-class is used to style a link when it is clicked?
A. :link
B. :visited
C. :hover
D. :active
Correct Answer:
D
Chapter: 44
Q506:
In the selector `a.highlight:hover`, what does `highlight` represent?
A. A pseudo-class.
B. A CSS class.
C. A tag.
D. A pseudo-element.
Correct Answer:
B
Chapter: 44
Q507:
Which pseudo-class matches the first child of an element?
A. :first-child
B. :last-child
C. :only-child
D. :first-of-type
Correct Answer:
A
Chapter: 44
Q508:
What is the effect of the pseudo-class `p:first-child`?
A. It matches any <p> element that is the first child of any element.
B. It matches any <p> element that is the last child of any element.
C. It matches any <p> element that is the only child of any element.
D. It matches any <p> element that is the first of its type.
Correct Answer:
A
Chapter: 44
Q509:
How does the pseudo-class `p i:first-child` function?
A. It matches the first <i> element inside any <p> element.
B. It matches any <i> element that is the first child of any <p> element.
C. It matches all <i> elements inside <p> elements that are the first child of another element.
D. It matches any <p> element that is the first child of any element.
Correct Answer:
B
Chapter: 44
Q510:
What does the `:lang` pseudo-class allow you to define?
A. Special rules for different languages.
B. The style for visited links.
C. The color of links on hover.
D. The layout of elements.
Correct Answer:
A
Chapter: 45
Q511:
What is the purpose of a CSS pseudo-element?
A. To style specific parts of an element.
B. To add a new HTML element.
C. To change the size of an element.
D. To position elements on the page.
Correct Answer:
A
Chapter: 45
Q512:
Which pseudo-element is used to style the first line of a block element?
A. ::first-letter
B. ::first-line
C. ::before
D. ::after
Correct Answer:
B
Chapter: 45
Q513:
Which properties can be applied to the ::first-line pseudo-element?
A. font properties, color properties, background properties
B. font properties, color properties, margin properties
C. font properties, padding properties, border properties
D. font properties, margin properties, padding properties, border properties
Correct Answer:
A
Chapter: 45
Q514:
Which pseudo-element is used to style the first letter of a block element?
A. ::first-line
B. ::first-letter
C. ::before
D. ::after
Correct Answer:
B
Chapter: 45
Q515:
Which CSS property applies to the ::first-letter pseudo-element but not the ::first-line pseudo-element?
A. font-size
B. font-variant
C. font-weight
D. color
Correct Answer:
B
Chapter: 45
Q516:
How can you style the first letter of a paragraph with class "intro" to be red and larger?
A. p.intro::first-letter { color: #ff0000; font-size: 200%; }
B. p.intro::first-letter { color: #ff0000; font-size: xx-large; }
C. p.intro::first-letter { color: red; font-size: large; }
D. p.intro::first-letter { color: blue; font-size: 150%; }
Correct Answer:
A
Chapter: 45
Q517:
What does the ::before pseudo-element do?
A. Inserts content before the content of an element.
B. Styles the first line of an element.
C. Inserts content after the content of an element.
D. Styles the first letter of an element.
Correct Answer:
A
Chapter: 45
Q518:
What effect does the ::after pseudo-element have?
A. It inserts content after the content of an element.
B. It inserts content before the content of an element.
C. It styles the first letter of an element.
D. It styles the first line of an element.
Correct Answer:
A
Chapter: 45
Q519:
Which pseudo-element is used to style selected text?
A. ::first-line
B. ::selection
C. ::before
D. ::after
Correct Answer:
B
Chapter: 45
Q520:
What is the syntax for applying a style to the first letter of a block element?
A. selector::first-letter { property:value; }
B. selector:first-letter { property:value; }
C. selector::first-line { property:value; }
D. selector:first-line { property:value; }
Correct Answer:
A