HTML 5 - 4.2 : Target HTML tags with selectors

CSS selectors enable developers to target and style specific HTML elements with precision. Element selectors target all instances of a specific tag, such as h1 or p, applying identical styles to every occurrence. ID selectors use the hash symbol (#) to target a single unique element by its ID attribute, while class selectors use the dot notation (.) to target multiple elements sharing the same class.

ID selectors are reserved for unique elements when specific styling is needed for one particular element. For example, #subtitle { font-size: xx-large; } targets only the element with id="subtitle". Class selectors provide greater flexibility by allowing multiple elements to share the same style. For instance, adding the class "featured" to several list items and styling .featured { border-left: 4px solid green; } applies styling only to those specific items without affecting other lists on the page.

Multiple selectors can be combined with commas to apply identical styles across different element types. For example, p, h2 { color: gray; } changes the color of both paragraphs and h2 headings simultaneously. Descendant selectors allow targeting elements based on their parent context, such as nav li { font-size: large; font-weight: bold; } to style only list items within navigation elements.

Understanding selector specificity is crucial for effective CSS implementation. More specific selectors override less specific ones, allowing developers to create flexible styling systems that prevent unwanted style inheritance while maintaining control over the visual hierarchy of web pages.