CSS Selectors Quiz

What is the primary function of a selector within a CSS rule?

• The selector specifies the color of the text in an HTML element.

• The selector determines the layout of the entire webpage.

• The selector defines which specific HTML elements a CSS rule applies to.

• The selector is used to add animations to HTML elements.

Answer explanation

The correct choice states that the selector defines which specific HTML elements a CSS rule applies to. This is fundamental in CSS, as it determines the elements that will be styled according to the defined rules.

How is a CSS rule written to target a specific class, and how does it differ from targeting a tag?

• To target a class, the name of the class must be preceded by a hashtag (e.g., #alert).

• To target a tag, the name of the tag must be preceded by a period (e.g., .h1).

• To target a class, the name of the class must be preceded by a period (e.g., .alert).

• To target a tag, the name of the tag must be preceded by a hashtag (e.g., #h1).

Answer explanation

To target a class in CSS, you use a period before the class name (e.g., .alert). This differs from targeting a tag, which does not use a period or hashtag; you simply write the tag name (e.g., h1).

What is the purpose of the class attribute in an HTML tag?

• The class attribute is used to uniquely identify an element on a webpage.

• The class attribute is used to add animations to an element.

• The class attribute is used to style a specific group of elements.

• The class attribute is used to define the structure of an HTML document.

Answer explanation

The class attribute in an HTML tag is primarily used to apply CSS styles to a specific group of elements, allowing for consistent styling across multiple elements that share the same class.

Can multiple HTML tags share the same class, and if so, how does the CSS rule affect them?

• No, each class can only be applied to one HTML tag.

• Yes, but the style will only apply to the first element with that class.

• No, classes are unique to each HTML tag.

• Yes, different types of tags can share the same class, and the style is applied to all elements with that class.

Answer explanation

Yes, different types of HTML tags can share the same class. When a CSS rule is applied to that class, it affects all elements with that class, allowing for consistent styling across multiple elements.

What are the two specific naming restrictions for both classes and IDs?

• Names cannot contain special characters and cannot start with a letter.

• Names cannot contain spaces and cannot start with a number.

• Names cannot contain underscores and cannot start with a number.

• Names cannot contain hyphens and cannot start with a letter.

Answer explanation

The correct choice states that names cannot contain spaces and cannot start with a number. These are essential restrictions for both classes and IDs in HTML and CSS, ensuring valid and predictable naming conventions.

How do you apply more than one class to a single HTML element?

• List the class names within the same class attribute, separating them with a comma.

• List the class names within the same class attribute, separating them with a space.

• Add multiple class attributes to the HTML element.

• Use a semicolon to separate class names within the class attribute.

Answer explanation

To apply multiple classes to a single HTML element, list the class names within the same class attribute, separating them with a space. This allows the element to inherit styles from all specified classes.

What is the fundamental difference between the usage of an ID attribute and a class attribute?

• An ID is intended for groups of elements, whereas a class is meant for a single, unique element.

• A class is used for styling, whereas an ID is used for animations.

• A class is intended for groups of elements, whereas an ID is meant for a single, unique element.

• An ID is used for styling, whereas a class is used for animations.

Answer explanation

The correct choice highlights that a class is used to group multiple elements for styling, while an ID is unique to a single element, making it suitable for specific targeting in CSS and JavaScript.

Describe the CSS syntax used to select an element by its ID.

• The name of the ID must be preceded by a period (e.g., .logo).

• The name of the ID must be preceded by an asterisk (e.g., *logo).

• The name of the ID must be preceded by a dollar sign (e.g., $logo).

• The name of the ID must be preceded by a hashtag symbol (e.g., #logo).

Answer explanation

In CSS, to select an element by its ID, you must precede the ID name with a hashtag symbol (#). For example, #logo targets the element with the ID 'logo'. The other options are incorrect as they use different symbols.

Explain the hierarchy of specificity when it comes to tag, class, and ID selectors.

• Class selectors are the most specific, followed by ID selectors, and then tag selectors.

• Tag selectors are the most specific, followed by class selectors, and then ID selectors.

• ID selectors are the most specific, followed by class selectors, and then tag selectors.

• All selectors have the same level of specificity.

Answer explanation

In CSS, ID selectors (#) have the highest specificity, meaning they override class (.) and tag selectors (element). Class selectors are more specific than tag selectors, which are the least specific. Thus, the correct hierarchy is ID > class > tag.

What happens to an HTML element's appearance if it is targeted by a tag selector, a class selector, and an ID selector simultaneously, but the styles do not conflict?

• Only the ID selector's styles will apply to the element.

• All three types of styles will apply to the element.

• Only the class selector's styles will apply to the element.

• Only the tag selector's styles will apply to the element.

Answer explanation

When an HTML element is targeted by a tag selector, a class selector, and an ID selector simultaneously, and the styles do not conflict, all three types of styles will apply to the element, enhancing its appearance.