8.4. Introduction to CSS: Selectors, Properties and Values: Combining CSS Selectors

Cascading Style Sheets (CSS) are a style language used to describe the appearance of a document written in HTML. They are used to control the layout of multiple web pages at once. In this section, we will discuss selectors, properties, and values ​​in CSS and how to combine them to create effective and attractive styles for your web pages.

CSS Selectors

CSS selectors are the means by which designers identify which HTML page elements should receive CSS styles. They can be divided into five categories: simple, combinator, pseudo-class, pseudo-element and attribute.

Simple selectors include type selector (e.g. h1, p), class selector (e.g. .intro, .footer), and ID selector (e.g. #navbar, #logo). They select elements based on element name, element class, or element ID, respectively.

Combinator selectors include the descendant combinator (e.g. div p), the child combinator (e.g. ul > li), and the adjacent combinator (e.g. h1 + p). They select elements based on their specific relationships to other elements.

Pseudo-class selectors include :hover, :focus, :active, :visited, and :link. They select elements based on their specific state.

Pseudo-element selectors include ::before, ::after, ::first-letter, and ::first-line. They select a specific part of an element.

Attribute selectors include [attr], [attr=value], [attr~=value], [attr|=value], [attr^=value], [attr$=value], and [attr* =value]. They select elements based on a specific attribute or attribute value.

CSS Properties and Values

CSS properties are the aspects of HTML elements that you want to style. For example, you may want to change the text color, font type, font size, line spacing, margin, padding, border, background, etc.

CSS values ​​are the specific styles you apply to properties. For example, you might want the text to be red, the font to be Arial, the font size to be 14px, the line spacing to be 1.5, the margin to be 10px, the padding to be 5px, the border to be solid 1px black, the flat background is blue, etc.

Combining CSS Selectors

Combining CSS selectors is a powerful way to apply styles to specific elements on your web page. For example, you might want to apply a style to all paragraphs within a specific div. To do this, you can combine the div type selector with the p type selector using the descendant combinator. The combined selector would be div p.

Another example would be to apply a style to all list items that are direct children of a specific unordered list. To do this, you can combine the ul type selector with the li type selector using the child combinator. The combined selector would be ul > li.

Also, you may want to apply a style to a specific element when it is in a specific state. For example, you may want to change the color of a link's text when the mouse is over it. To do this, you can combine the a type selector with the :hover pseudo-class selector. The combined selector would be a:hover.

In conclusion, combining CSS selectors allows you to apply styles to specific elements on your web page precisely and efficiently. By mastering this skill, you can create high-quality, visually appealing web pages.