search

Home >Web Front-end >CSS Tutorial >Introducing CSS Selectors

Introducing CSS Selectors

DDD
DDDOriginal
2025-01-22 00:13:10366browse
<p>This lesson delves into enhancing HTML visuals using Cascading Style Sheets (CSS). We'll begin with CSS selectors – the tools for targeting specific HTML elements.

<p>Cascading Style Sheets (CSS)

<p>CSS dictates the look of HTML components: color, spacing, size, and more. While you can style individual elements using inline style attributes (e.g., <p style="color:red;">), this is inefficient for large websites.

<p>A more effective approach involves using a <style> element within the <head> section of your HTML or a separate CSS file (like style.css) linked to your HTML using <link>:

<code class="language-html">  <style>
    p {
      color: red;
      text-decoration: underline;
    }
  </style></code>
<p>or

<code class="language-html"><!-- index.html -->
<link href="style.css" rel="stylesheet"></code>
<code class="language-css">/* style.css */
p {
  color: red;
  text-decoration: underline;
}</code>
<p>This applies the same style to all <p> elements. Browser developer tools (e.g., right-click, "Inspect" in Chrome) let you examine and modify applied styles for troubleshooting.

Introducing CSS Selectors Introducing CSS Selectors <p>Selecting HTML Elements

<p>The p in p { color: red; } selects all <p> elements. For more complex structures, id and class attributes provide finer control.

<p>Class and ID Selectors

<p>Each element can have a unique id. ID selectors (#idName) target elements by their id. However, ids must be unique, limiting their flexibility.

<p>Classes offer greater versatility. Multiple elements can share the same class. Class selectors (.className) target elements with that class. Elements can have multiple classes (e.g., <p class="red-text bold">).

<p>.red-text { color: red; } styles all elements with the red-text class. p.red-text specifically styles only <p> elements with red-text.

<p>Combinator Selectors

<p>The Document Object Model (DOM) represents the page's structure as a tree. Combinator selectors leverage this hierarchy.

  • div p: Selects all <p> elements within <div> elements (descendants).
  • div > p: Selects only the direct children <p> elements of <div> elements.
  • p span: Selects the <span> immediately following a <p>.
  • p ~ span: Selects all <span> siblings following a <p>.
Introducing CSS Selectors Introducing CSS Selectors Introducing CSS Selectors Introducing CSS Selectors Introducing CSS Selectors <p>Overly complex combinator combinations are discouraged. You can combine them with class selectors (e.g., .intro p).

<p>Pseudo-selectors

<p>Pseudo-class selectors style elements based on their state (e.g., a:hover, a:active, a:visited). Pseudo-element selectors target parts of an element (e.g., ::first-letter).

<p>Other Selectors

  • *: The universal selector, selecting all elements.
  • Group selectors (e.g., h1, h2, p): Select multiple element types.
  • Attribute selectors (e.g., p[lang], p[lang="en"]): Select elements based on attributes.
<p>Further Reading:

  • Responsive Design
  • Responsive Images
  • CSS Animations
<p>This post originally appeared on TheDevSpace.

The above is the detailed content of Introducing CSS Selectors. For more information, please follow other related articles on the PHP Chinese website!

css chrome html Object for while select using class Attribute dom this Other
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to Hide WordPress Admin BarNext article：How to Hide WordPress Admin Bar

Related articles

See more