JavaScript Masterclass - Zero to Job-Ready with Hands-On Projects - Specificity / R029

The lecture covers CSS specificity, explaining how different selectors like tags, classes, and IDs are prioritized. It demonstrates how CSS rules are applied and overwritten, emphasizing the importance of understanding specificity. The use of inline CSS and the !important rule is discussed, highlighting their impact on CSS hierarchy. The lecture advises against the frequent use of !important due to its potential to complicate code maintenance. Overall, the session aims to provide a clear understanding of CSS specificity and best practices for managing style rules.

What is the correct order of specificity from least to most specific in CSS?

• ID, Class, Tag

• Tag, ID, Class

• Tag, Class, ID

• Class, ID, Tag

In the context of CSS, what happens when two selectors have the same specificity?

• Both selectors are ignored

• The last selector in the code is applied

• The first selector in the code is applied

• An error is thrown

Which CSS selector has the highest specificity?

• ID

• Universal

• Tag

• Class

What is the effect of using inline CSS?

• It can override external and internal styles

• It has the lowest specificity

• It cannot override ID selectors

• It is ignored if there is an external stylesheet

What is the purpose of the '!important' rule in CSS?

• To apply styles only in Internet Explorer

• To decrease the specificity of a selector

• To ensure a style is applied regardless of other rules

• To increase the specificity of a selector

Why should the '!important' rule be used sparingly?

• It can make the code difficult to maintain

• It increases the file size

• It is not supported in all browsers

• It makes the code run slower

What is a recommended practice when dealing with CSS specificity issues?

• Organize and refactor CSS to avoid specificity conflicts

• Rely on inline styles for all elements

• Use only ID selectors for styling

• Use '!important' frequently to ensure styles are applied