CSS Selector

A CSS selector is the part of a rule before the curly braces that matches elements in the document. It can target elements by tag name, class, ID, attribute, position or relationship to other elements.

Why it matters

Selectors decide which rule wins, and that determines whether your styling works. Specificity and source order resolve conflicts: an ID beats a class, which beats a tag. Overly specific or deeply nested selectors make a stylesheet hard to change and slow down maintenance, while clear class-based selectors scale well.

Example

p { color: #333; }                 /* every paragraph */
.card { padding: 1rem; }           /* class */
#hero { margin: 0; }               /* ID */
nav a:hover { text-decoration: underline; }
a[target="_blank"] { cursor: alias; }

The fourth rule uses a descendant combinator and a pseudo-class; the fifth uses an attribute selector.

Common mistakes

• Reaching for !important instead of understanding specificity.
• Chaining long selectors like div.a ul li span, which break whenever markup changes.
• Styling by ID, which is hard to override and cannot be reused.

Related

• HTML Element
• CSS Box Model
• Media Query
• Critical CSS
• टूल: Developer tools

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.