CSS Selectors

CSS uses selectors to determine the element or elements to which style rules will be applied.

images/articles/css/css26.webp

There are three basic types of CSS selectors:

  1. HTML Element Selectors
  2. Identifier Selectors
  3. Class Selectors

1. HTML Selector

Any HTML element can be the target of a selector. You simply use the element name, with no brackets around it.

div {
font-weight: bold;
}

The name of the element, div, is followed by a brace. This indicates that the rule is beginning. Within the opening and corresponding closing brace, the property, font-weight, is selected, followed by a colon (:). The value is then set to bold. The line is terminated with a semicolon (;). This semicolon tells the browser that the line is done; in other words, the property/value pair are closed.

2. Id Selector

When you want to target only one element on a page, you can use id selector. The id (short for identifier) enables you to select one and only one element within a page. To do so, you need to modify the HTML to add an id attribute and provide a name for that element. For example, if you want to make the text bold:

<div id="BoldText">This text is bold</div>

The id is value is set to BoldText.

To select this id within the CSS, you use a pound sign or hash character (#)

#BoldText {
font-weight: bold;
}

When using IDs in HTML, you can use it only once across an entire page. You can use the same ID in different pages, but the ID should appear only once within a page. If you need to apply the same style to more than one element, then use classes.

3. Class Selector

A CSS class is used to select multiple elements and apply a style to them. A CSS class is applied only to the specific elements that you choose. 

<div class="boldText">This text is bold</div>

An ID selector uses a hash sign (#) in the CSS and a class uses a single period or dot.

.boldText {
/* CSS Goes Here */
}

You can use a class in the HTML to target only those elements that you want to target.

Dependent Class Selectors

You can specify styles to apply using a class applied to a specific HTML tag, making it a dependent class. For example,

a.myClass

4. CSS3 Selectors

With CSS3, you can target almost any element on the page with a wide range of selectors. 

Contextual styles allow you to specify how a particular element should appear based on its parents and siblings. Parent elements contain other elements (children). Child elements often inherit styles from a parent element. Descendant elements are any elements within another element.

Child elements are first generation descendant elements in relation to the parent. Second generation and higher elements are sometimes referred to as grandchildren. Adjacent or preceding sibling elements are child elements of the same generation that are immediately next to each other in the HTML code.

5. Relational Selectors

Relational selectors target elements based on their relationship to another element within the markup.

A. Descendant (E F)

The descendant selector targets any element F that is a descendant (child, grandchild, great grandchild, and so on) of an element E. For example, ol li targets li elements that are inside ordered lists. This would include li elements in a ul that is nested in an ol.

B. Child (E > F)

This selector matches any element F that is a direct child of element E. Any further nested elements will be ignored. For example, ol > li would only target li elements directly inside the ol, and would omit those nested inside a ul.

C. Adjacent Sibling (E + F)

This will match any element F that shares the same parent as E, and comes directly after E in the markup. For example, li + li will target all li elements except the first li in a given container.

D. General Sibling (E ~ F)

It will match any element F that shares the same parent as any E and comes after it in the markup. So, h1~h2 will match any h2 that follows an h1, as long as they both share the same direct parent, that is, as long as the h2 is not nested in any other element.

6. Attribute Selectors

CSS2 introduced several attribute selectors. These allow for matching elements based on their attributes. CSS3 expands upon those attribute selectors, allowing for some targeting based on pattern matching.

Styles can be assigned to an HTML element based on an attribute or an attribute value, allowing you to set styles if the attribute has been set, is or is not a specific value, or contains a specific value.

A. E[attr]

Matches any element E that has the attribute attr with any value.

B. E[attr=val]

Matches any element E that has the attribute attr with the exact, case-insensitive value val. It is helpful in targeting form input types. For instance, target check boxes with input[type=checkbox].

C. E[attr|=val]

Matches any element E whose attribute attr either has the value val or begins with val-. This is most commonly used for the lang attribute. For example, p[lang|="en"] would match any paragraph that has been defined as being in English, whether it be UK or US English.

D. E[attr~=val]

Matches any element E whose attribute attr has within its value the full word val, surrounded by white space. For example, .info[title~=more] would match any element with the class info that had a title attribute containing the word "more", such as "Click here for more information".

7. Pseudo-classes

Many HTML elements have special states or uses associated with them that can be styled independently. For example, link tag, <a>, which has link (normal state), visited state (when the visitor has already been to the page represented by the link), hover (when the visitor has their mouse over the link), and active (when the visitor clicks the link). All four of these states can be styled separately.

Styling for Interaction

Once loaded, web pages are not static. Users will start interacting with the page, moving their pointers across the screen. The dynamic pseudo-classes allow you to style elements as the user interacts with them, providing visual feedback.

  • :hover - Same as for links, but sets the appearance of the element when the pointer is hovering over it.
  • :focus - Applied to elements that can receive focus, such as form text fields.
  • :active - Same as for links, but sets the style of the element when it is clicked or selected.

8. Pseudo-elements

A. Working with first letters and lines

A pseudo-element is a specific, unique part of an element - such as the first letter or first line of a paragraph - that can be styled independently of the rest of the element.

You can access the first letter of any block of text directly using the :first-letter pseudo-element. The first line of any block of text can be isolated for style treatment using the :first-line pseudo-element.

B. Setting content before and after an element

The :before and :after pseudo-elements can be used to generate content that appears above or below a selector. Generally, these pseudo-classes are used with the content property.

The pseudo-elements let you add and style repetitive content to the page in a consistent way.

9. Media Queries

CSS3 has an important capability that allows you to set styles based on common interface properties such as width, height, aspect ratio, and number of available colors. Media queries and the @media rule can be used to tailor your page, not just to a general device type but to the specific device your site visitor is using. This includes sizing for print, for mobile devices, or to best fit the size of the open browser window.

Media queries provide you with several common media properties that you can test and then delivers the style sheet that best suits the environment.

  • Aspect-ratio looks for the relative dimensions of the device expressed as a ratio: 16:9, for example.
  • Width and height looks for the dimensions of the display area. These can also be expressed as maximum and minimum values.
  • Orientation looks for landscape (height greater than width) or portrait (width greater than height) layout. This allows you to tailor designs for devices that can flip.
  • Color, Color-index, and monochrome finds the number of colors or bits per color. These allow you to tailor your design for black and white mobile devices.
  • Resolution looks at the density of pixels in the output. This is especially useful when you want to take advantage of display devices that have a higher resolution than 72 dpi.

The @media rule to specify styles with media queries

Type @ and media. Then specify the media type and any media queries for the styles. For example,

@media screen and
➝ (max-device-width: 480px) and
➝ (min-device-width: 320px) {...}

For example, you might specify that these styles are for screens with a width between 320px and 480px.

Styling for Print

You can improve the appearance of printed web pages. For example,

1. Use page breaks before page headers to keep them with their text.

2. Separate content from navigation. Try to keep the main content - the part your audience is interested in reading - in a separate area of the design from the site navigation. You can then use CSS to hide navigation in the printed version 

nav {display: none}

3. Avoid using transparent colors in graphics. This is especially true if the graphic is on a background color or a graphic other than white. Avoid using text in graphics. Avoid dark-colored backgrounds and light-colored text. Generally you want to keep white as your background color for most of the printed page, and black or dark gray for the text.