CSS Selectors Guide: Basic, Attribute, and Combinator Selectors

Mechanism of Targeting and Dominance

In web design, while HTML forms the skeleton and semantic structure of the page; CSS is the skin, clothing, and makeup applied to that skeleton.

However, for these two different languages to understand each other and interact, they need a common communication protocol.

This is where CSS Selectors come in—they are the addressing system for style rules that enable this communication.

Writing CSS is technically giving a series of visual commands to the browser: "Make it red", "Center it", "Add a shadow".

But for these commands to be meaningful, it must be clear to whom the command is being given.

Selectors are filtering patterns that determine which of the hundreds of elements in the document will be affected by the style block you write (color: red;).

Without this mechanism, even the most advanced visual styles you write would remain suspended in a void.

Selectors grant the designer surgical precision over the page; offering a wide area of control from targeting a simple tag to

defining complex hierarchical states such as "when hovering over the third item inside a list."

Logical Layer Selectors are not just the visual side of CSS, but also its logical side.

How sustainable, manageable, and performant a web page will be depends on how correctly the selectors are constructed.

Correct selector usage prevents code repetition, ensures the browser paints the page faster, and lays the foundation for the design to behave consistently across different screen sizes.

Relationship with Document Structure

Selectors do not just target a single element; they also utilize the document's hierarchical structure.

A web page is interpreted by the browser not just as plain text, but as a tree-like structure.

This structure defines the parent, child, and sibling relationships between elements.

By using these relationships, CSS selectors can target not just specific elements, but elements within a specific context.

This allows designers to write highly precise style rules that take into account not only a tag, but also its position within the page.

Introduction - Overview

In CSS, selectors are not just syntactical tools; they are the building blocks of a style architecture.

In modern web development, different selectors fulfill different roles. Element selectors typically establish the base typography, while class selectors are used to manage UI components.

ID selectors, on the other hand, are mostly preferred for JavaScript interactions or internal page links (anchors).

Before you start painting a web page, you need to know exactly where to apply the brush.

Basic Selectors are the most direct, pure, and frequently referenced methods for targeting an HTML element in the CSS world.

These selectors work directly by looking at the element's name, class, or identity, without diving into complex relationships ( parent-child, sibling, etc. ).

This group forms the foundation of a web page's style architecture.

These are the first tools a developer must master when learning CSS; because CSS's "Specificity" scoring system—which determines which rule prevails—is built upon this tripartite structure (Tag, Class, ID).

The Simplest Form of Targeting

Basic selectors represent the most direct methods of targeting an element in CSS.

These selectors work based on the element's identity or type without requiring any relationship or context analysis.

Therefore, this group constitutes the fundamental building blocks of a web page's style architecture.

All advanced selectors are actually derived from combinations or extended forms of these basic selectors.

These are the first tools a developer must master when learning CSS; because the Specificity scoring system, which determines which rule will be dominant, is built upon this tripartite structure (Tag, Class, ID).

Basic Style Control

The shortest path to giving direct commands to the browser like "Make this heading red" or "Enlarge this paragraph" is through these selectors.

This is why basic selectors are not just the starting point of the CSS learning process; they are also accepted as the foundation of the entire style architecture.

Using the correct selectors in a project increases code readability, reduces unnecessary repetition, and ensures that the page's style structure is easier to manage in the long term.

Introduction - Overview

The most comprehensive, general, and without exception, the only command in CSS, the Universal Selector, is represented by the asterisk symbol (*) on the keyboard.

In browser language, this symbol means "Everything."

It is defined using only the * character.

When the browser sees this character, it starts from the root of the HTML document, the <html> tag, and selects every single element existing on the page, all the way down to the smallest <span> or <i> tags at the very tips of the tree.

It makes no distinction based on type or class; it brings everything into its scope.

Critical Use Cases

The universal selector is usually used at the very beginning of a project to define "global rules" that affect the entire page.

CSS Resetting (Reset): Every web browser ( Chrome, Safari, Firefox ) has its own unique default style settings ( User Agent Stylesheet ).

For example: While one browser leaves an 8-pixel margin on page edges, another might leave 10 pixels.

To prevent the designer from having to fight this inconsistency, the inner and outer spacing of all elements is zeroed out using the universal selector.

(margin: 0; padding: 0;).

This provides a clean and equal "starting canvas" across all browsers.

Box-Sizing (Box Model) Correction: The most vital rule of modern web development is right here.

In the default HTML box model, when you add padding or border to a box, the width of the box inflates and breaks the calculation.

Using the universal selector, the box-sizing: border-box; rule is assigned to all elements.

This way, padding and border values are included within the box's width, preventing overflows and solving mathematical calculation complexity once and for all for the entire project.

Performance Note: Balancing Power and Cost

The saying "With great power comes great responsibility" is a technical warning for the Universal Selector.

Processing Load: When the browser sees the * symbol, it must check each of the ( potentially thousands of ) elements on the page individually and apply the style.

Especially on very large and complex pages, this can slow down the browser's rendering process.

Best Practice: This selector should only be used in situations that truly must affect every element, like the aforementioned "Resetting" and "Box-Sizing."

For example: Using * { color: red; } to make all text red is bad practice; because this is a task that should be solved through inheritance.

Unnecessarily using the universal selector is a "costly error in terms of performance."

Technical Depth

The universal selector is one of the selectors with the lowest specificity in the CSS selector hierarchy.

This means that when more specific selectors are used on the same element, these rules can easily override the universal selector.

For example, a general style defined with * on a page can be easily overridden by a later .class or #id selector.

Scoped Universal Selector: The universal selector does not always have to affect the entire document.

When used in conjunction with a container selector, its effect can be limited to only a specific section.

For example, in a component structure, it can be used to target all elements inside only a specific area.

(.card * { box-sizing: border-box; })

This approach is quite useful for providing style isolation in large projects.

Modern Reset Approach: Today, many developers prefer using a more controlled starting style instead of a classic CSS reset.

In this approach, the universal selector is used only to reset necessary properties, avoiding unnecessary style interventions.

This ensures that browser compatibility is maintained and the style system becomes more predictable.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal Selector Introduction Example</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="kutu">
        <h1>Modern Design</h1>
        <p>With the universal selector, we reset all browser differences.</p>
        <button>Explore</button>
    </div>
</body>

</html>

/* CSS Implementation */

/* 1. Reset default spacing of all elements */
/* 2. Prevent overflow by setting box model to border-box */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Define a base font family for the page */
body {
  font-family: sans-serif;
  padding: 20px;
  line-height: 1.6;
}

.kutu {
  background-color: #f4f4f4;
  padding: 20px;
  border: 2px solid #333;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Selector Specificity Demo</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

  <h1 id="title" class="heading highlight">Heading Text</h1>

  <p class="text">
    This is a paragraph.
  </p>

  <p id="specialText" class="text highlight">
    This paragraph has multiple selectors applied.
  </p>

  <div class="card highlight">
    Card component
  </div>

</body>

</html>

/* Global reset + modern appearance */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #1e1e2f, #2a2a40);
  color: #e4e4e7;
  padding: 40px;
}

body > * {
  max-width: 700px;
  margin: 0 auto 20px auto;
}

.heading {
  font-size: 32px;
  padding: 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  text-align: center;
  transition: 0.3s;
}

#title {
  color: crimson;
  box-shadow: 0 0 15px rgba(220, 20, 60, 0.4);
}

p {
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  transition: 0.3s;
}

.text {
  color: #4ade80;
}

#specialText {
  color: #f87171;
  font-weight: bold;
  border: 1px solid rgba(248, 113, 113, 0.5);
}

p:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
}

.card {
  padding: 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  transition: 0.3s;
}

.card.highlight {
  border: 2px solid #a855f7;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}

.highlight {
  background: rgba(255, 255, 0, 0.08);
}

.card:hover {
  transform: scale(1.02);
}
                        

Introduction - Overview

Type selectors ( Type or Element Selectors ) are the "broad brushstrokes" of CSS.

It is the method of styling by directly calling the building blocks of the HTML document—the tags themselves—by name.

This selector type does not look at the element's position on the page, its identity, or its class; it simply asks, "Who are you?"

If the answer is "I am a paragraph ( <p>)," it applies the style.

Type selectors are the purest and most fundamental building blocks of the CSS language.

Unlike the syntax where class selectors require a dot ( . ) or ID selectors require a hash ( # ) prefix; type selectors are used in their plain form.

They directly reference the "official name" of the HTML element.

Syntax Rule: Just as you open a tag in HTML (<div>, <h1>, <a>), you write that exact name in CSS without any symbols at the beginning or end. ( body, h1, p, ul, li, span, img )

Logic: "Unquestioned" Application

The working principle of this selector is built on "generalization" rather than induction.

When you write the p { color: blue; } command in your CSS file, you are giving the browser the following order:

"Scan the entire DOM tree of the page."

Find every object whose tag is <p>.

I don't care where this paragraph is on the page, which box it is hidden inside, or what other classes it has; paint every single one blue without exception."

This means the scope of the selector is the entire document.

Therefore, type selectors are used not for precision styling, but to define page-wide standards

( such as having all links underlined or removing bullet points from all lists ).

Base Typography: The readability of a website depends on consistent typography.

They are used to manage the line height of all paragraphs (p), the font family of all headings (h1-h6), and the underline state of all links (a) from a single place.

Page-wide Settings: Usually by targeting the body tag, the page's default background color (background-color) and main typeface

( font-family ) are determined.

This creates a foundation that is passed down to child elements through inheritance.

Priority State: "Overridable" Defaults

Technically, type selectors have the lowest score ( 0-0-1 ) in CSS's Specificity scoring system.

Why is this an Advantage? Being low-scored makes them a strategic tool for "flexibility" rather than a "weakness."

Strategy: You make all paragraphs gray with the p selector.

If you later want to make a paragraph inside a specific warning box red by giving it a .warning class, the browser will override the type selector because the class selector has a higher score and will make that paragraph red.

Type selectors are a solid foundation to build upon; they are not the final decoration.

Practical Use Note:

In modern projects, type selectors are generally used to create base style rules.

To manage the visual design of components or special interface parts, class selectors are usually preferred.

This approach ensures that style rules are more flexible, reusable, and easier to maintain in the long run.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tag Selector Introduction Example</title>
    <link rel="stylesheet" href="styles.css?v=1.0.150">
</head>

<body>
    <section>
        <h2>Web Development World</h2>
        <p>Tag selectors affect all elements of the same type on the page.</p>
        <p>All these paragraphs are styled with the same brush stroke.</p>
        <a href="#">Learn more...</a>
    </section>
</body>

</html>

/* CSS Implementation */

/* Makes all h2 elements dark blue */
h2 {
  color: #2c3e50;
  margin-bottom: 10px;
}

/* Makes all paragraphs gray and readable */
p {
  color: #555;
  font-size: 16px;
}

/* Removes underline from all links */
a {
  text-decoration: none;
  color: #3498db;
}

Introduction - Overview

Unlike the "coarse and general" approach of type selectors, Class Selectors offer the web developer surgical precision and limitless flexibility.

These selectors, which begin with a dot (.) sign in CSS syntax (.menu, .warning-box), work by matching the class attribute within the HTML document.

The primary reason class selectors are the backbone of modern web design is that they make styles completely independent of the HTML tag type ( div, p, span ).

Structural Independence and Reusability

The greatest strength of class selectors is their ability to create "Named Style Packages."

When you create a class named .red-text, you can apply this style simultaneously to a heading ( h1 ), a paragraph ( p ), or a link (a ) on the page.

The browser does not look at whether the element is an <h2> or a <span>; it simply asks, "Does its identity contain this class?"

This allows you to use the same visual rule repeatedly in hundreds of different places on the page, implementing the

"Write Once, Use Everywhere" (DRY) principle.

Multiple Class Usage: Modular "Lego" Logic

Another revolutionary feature of class selectors is that an HTML element can possess multiple classes

(<button class="btn btn-primary btn-lg">).

This feature enables the construction of "Modular" structures rather than "Monolithic" blocks in CSS authoring.

Composition: In the example above, the btn class establishes the button's basic skeleton ( padding, font ); the btn-primary class gives it its blue color; and the btn-lg class increases its size.

Just like Lego bricks, creating complex and manageable components by combining small, independent style classes is the operational foundation of modern CSS frameworks.

Priority Power (Specificity):

Class selectors hold a medium level of power within CSS's Specificity system.

The specificity score of a class selector is calculated as 0-1-0.

This value means it is stronger than Type selectors, but weaker than ID selectors.

This balance has made class selectors the safest and most widely used targeting tool in modern CSS architecture.

Modern CSS Approach:

Nowadays, class selectors are used not just for styling, but for building component-based UI architectures.

Many modern CSS methodologies (BEM, Utility CSS, Component Architecture) build their style rules entirely upon class selectors.

This method ensures that style rules remain isolated, reusable, and scalable.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Advanced Selectors</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

  <div class="container">
    <h2>Heading</h2>

    <p>This is a direct child paragraph</p>

    <div>
      <p>This is a nested (descendant) paragraph</p>
    </div>

    <ul>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ul>

    <a href="#" target="_blank">Opens in new tab</a>

    <input type="text" placeholder="Enter text">
    <input type="password" placeholder="Password">

    <button>Hover me</button>
  </div>

</body>

</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: #eaeaf0;
  padding: 40px;
}

.container {
  max-width: 700px;
  margin: auto;
  padding: 25px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

h2 {
  margin-bottom: 20px;
  text-align: center;
  color: #60a5fa;
}

.container p {
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  background: rgba(59, 130, 246, 0.15);
  border-left: 4px solid #3b82f6;
}

.container > p {
  background: rgba(239, 68, 68, 0.15);
  border-left: 4px solid #ef4444;
  font-weight: bold;
}

ul {
  margin: 20px 0;
  padding-left: 20px;
}

li {
  margin-bottom: 6px;
  transition: 0.2s;
}

li:first-child {
  color: #facc15;
  font-weight: bold;
}

a {
  display: inline-block;
  margin-bottom: 15px;
  color: #93c5fd;
  text-decoration: none;
  position: relative;
}

a[target="_blank"] {
  color: #c084fc;
}

a[target="_blank"]::after {
  content: " ↗";
  font-size: 12px;
}

input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
  border: none;
  outline: none;
}

input[type="text"] {
  border: 2px solid #4ade80;
}

input[type="password"] {
  border: 2px solid #f87171;
}

button {
  margin-top: 10px;
  padding: 10px 15px;
  border: none;
  border-radius: 10px;
  background: #3b82f6;
  color: white;
  cursor: pointer;
  transition: 0.25s;
}

button:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}

.container * {
  transition: all 0.2s ease;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Advanced Class Selector Example</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

  <div class="card-container">
    <h3 class="text-highlight">Featured Heading</h3>

    <p>This is a normal text.</p>

    <p class="text-highlight">
      This text is highlighted using the same class.
    </p>

    <p class="text-highlight underline">
      This text uses two classes together.
    </p>

    <button class="button button-primary">Primary Button</button>
    <button class="button button-secondary">Secondary Button</button>

  </div>

</body>
</html>

body {
  font-family: 'Segoe UI', sans-serif;
  background: #1e1e2f;
  color: #e4e4e7;
  padding: 40px;
}

.card-container {
  max-width: 500px;
  margin: auto;
  padding: 20px;
  border-radius: 12px;
  background: #2a2a40;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.text-highlight {
  color: #f59e0b;
  font-weight: bold;
}

.underline {
  text-decoration: underline;
}

.button {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  margin-right: 10px;
  transition: 0.2s;
}

.button-primary {
  background-color: #22c55e;
  color: white;
}

.button-secondary {
  background-color: #3b82f6;
  color: white;
}

Introduction - Overview

While class selectors in CSS exhibit a "pluralistic" approach to managing groups, ID Selectors, by contrast, offer a "singular" and absolute approach.

These selectors, which begin with a hash/pound sign (#) (such as #main-logo, #contact-form), match the id attribute in the HTML document.

According to HTML standards, an ID value can be used only once within a page; this makes ID selectors the sharpest tool designed for targeting that unique and singular piece

( like a fingerprint ) on the page.

Critical Difference: Priority Power and the "Specificity" War

technically, the most distinctive feature of ID selectors compared to class selectors is that they possess a much higher Specificity Score.

The browser always treats an ID as a "Heavyweight" when resolving style conflicts.

For example: If an element is assigned both a class (.color-red) and an ID ( #special-box ) and these two rules conflict

( if one makes it red and the other makes it blue ), the browser completely ignores the class and follows what the ID dictates.

Although this power may seem like an advantage at first glance, it is an "Architectural Trap" that makes management difficult in large projects.

If you later want to override a style written with an ID with another rule, normal classes will not work; you would either have to use a stronger ID or resort to bad practices like !important.

This situation is referred to in literature as "Specificity Wars" and can make code maintenance impossible.

Modern Approach: For Behavior, Not for Style

Due to this "excessive power" and lack of flexibility, the use of ID selectors for styling purposes is not recommended in modern CSS methodologies ( such as BEM, OOCSS ).

Professional developers prefer to use IDs for "behavioral" and "structural" purposes, such as catching DOM elements with JavaScript or creating internal page anchor points.

For visual styles, Class ( .class ) selectors, which have lower priority and are easier to manage, are always the standard.

Specificity Value:

ID selectors are one of the most powerful selectors in CSS's Specificity system.

The specificity score of an ID selector is calculated as 1-0-0.

This value means it is stronger than even a combination of class and type selectors.

HTML Singularity Rule:

The id attribute must be unique within a document according to the HTML specification.

While it is technically possible to use the same ID value on more than one element, this creates invalid markup.

In such a case, CSS usually targets the first matching element, but JavaScript behaviors may yield unexpected results.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ID Selector Introduction Example</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
  <header id="main-header">
    <div id="logo">CODE-ARCHITECT</div>
    <nav>
      <ul class="menu-list">
        <li>Home</li>
        <li>Courses</li>
        <li>Gallery</li>
        <li>Contact</li>
      </ul>
    </nav>
  </header>
</body>

</html>

/* CSS Implementation */

/* Fix and style the unique main header section */
#main-header {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid #f39c12;
}

/* Special styling for the unique logo area */
#logo {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

Introduction - Overview

In CSS development, efficiency is one of the most fundamental criteria that distinguishes "good code" from "bad code."

While writing hundreds of lines of style code in a project, defining the same properties ( such as text color or font family ) repeatedly for different elements inflates the file size and turns management into a nightmare.

Grouping Selectors, with their structure created by placing commas between them, are the mechanism that ends this repetition and brings the DRY (Don't Repeat Yourself) principle—the golden rule of the software world—to CSS.

The Power of the Comma and Collective Style Management

In this method, completely independent selectors ( such as a tag, a class, and an ID side by side ) that you wish to target are gathered in a single line, separated by commas.

Operating Logic: When the browser sees this list, it interprets the comma as an "AND" conjunction: "Find the h1 heading AND find the h2 heading AND find the .special-box class; then apply the same rules within the brackets to all of them."

Single Source of Management: This creates a "Single Source of Truth" in style management.

For example: Suppose you want all headings in your site (from h1 to h6) and introductory paragraphs with the .lead class to have the same gray tone (#333).

If you write this 7 separate times without grouping, you will need to edit 7 different lines when you want to change the color tomorrow.

When you group them, changing a single line is sufficient to update the entire site.

This increases code readability, reduces file size, and optimizes the time it takes for the browser to parse styles.

Syntax Example:

To apply the same style rules by grouping multiple selectors, the selectors are separated by commas.

For example, the following CSS rule applies the same style to all of the h1, h2, and .lead selectors:

h1, h2, .lead { color: #333; }

The browser interprets this expression as three separate rules, but for the developer, a single style definition is sufficient.

Priority (Specificity) Behavior:

When grouping selectors are used, each selector maintains its own Specificity value.

In other words, even if different selectors like h1, .title and #logo are grouped, the browser evaluates them as three separate style rules.

Therefore, an ID selector within a group continues to have stronger priority than the class or type selectors within the same group.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Group Selector Advanced Example</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
  <main>
    <h1 id="main-title">Advanced Software Course</h1>
    <h2>CSS Selectors Module</h2>
    <h3 class="sub-title">Group Selector Practices</h3>

    <p class="summary-text">
      This text and the headings above share a common styling system.
    </p>
  </main>
</body>

</html>

body {
  font-family: 'Segoe UI', sans-serif;
  background: #1e293b;
  color: #e2e8f0;
  padding: 40px;
}

main {
  max-width: 600px;
  margin: auto;
}

h1,
h2,
h3,
.summary-text {
  color: #334155;
  font-family: 'Segoe UI', sans-serif;
  margin-top: 0;
  line-height: 1.4;
}

h1,
h2,
.summary-text {
  border-left: 5px solid #3b82f6;
  padding-left: 15px;
  margin-bottom: 20px;
}

h1,
h2,
h3 {
  letter-spacing: 0.5px;
}

h1:hover,
h2:hover,
h3:hover {
  color: #60a5fa;
  transition: 0.2s;
}

.sub-title {
  color: #f59e0b;
}

#main-title {
  color: #ef4444;
}

Introduction - Overview

The Basic Selectors we have examined so far ( Tag, Class, and ID ) focused on the visible identities of HTML elements.

However, HTML tags carry background data snippets called "Attributes" that determine the technical function of the element ( such as type="text", href="https://google.com", required, or alt="Logo" ).

This data is the DNA of the tag.

Attribute selectors allow you to target elements using these natural and functional properties they already possess, instead of cluttering the HTML structure with extra classes ( class ) for visual purposes.

This method makes it easier to stay true to the principles of Semantic HTML and grants the developer "intelligent" flexibility, especially when working with form elements, file links, or multi-language sites.

Tip: Attribute selectors help keep your style code clean and sustainable, particularly when targeting repetitive elements like form inputs or links.

Introduction - Overview

This selector group is the most rigid and disciplined querying method in CSS.

Before applying a style rule, the browser acts like a detective: It checks whether the specified attribute exists on that tag and, if it does, whether its value matches the requested condition exactly ( literally ).

This method allows you to perform "surgical" interventions by using the functional identities of elements without adding extra classes to the HTML structure.

Exact Value Match ([attribute="value"])

This structure works with the "Equals" (=) logic in mathematics.

For a match to occur, the attribute value must be character-for-character identical to the expression inside the quotes.

Example: input[type="text"]

Scenario: Imagine a form; inside, a "Submit" button (submit), a "Checkbox" ( checkbox ), and a "Name Field" ( text ) stand side by side.

From an HTML perspective, these are all <input> tags.

If you write a general input { ... } style, your buttons will take on the same appearance as your text fields, breaking the design.

Solution: With the input[type="text"] selector, you give the browser this command: "Find only the inputs whose type attribute is 'text'."

Thus, you style only the text-entry fields as if picking them with tweezers, without touching buttons or checkboxes.

This is the cleanest targeting method performed without needing additional classes.

Presence Control ([attribute])

Here, what is written inside the attribute (the value) is completely irrelevant; what matters is whether that attribute is defined on the tag.

This is the "Boolean" logic of the software world.

Example: input[required] or button[disabled]

Scenario: In a form, you want to visually distinguish fields that the user must fill from others.

regardless of its value (or even if it has no value), you can select all boxes containing the required attribute and make their borders red.

Similarly, you can select passive buttons possessing the [disabled] attribute and reduce their opacity.

Solution: This method establishes a dynamic style mechanism that improves User Experience ( UX ) and reacts instantly based on the HTML state ( state ).

Tip: Attribute selectors help you keep your HTML structure clean and make your style code more sustainable while targeting repetitive elements like forms and links.

Note: Using very broad scopes like [*] or [attribute*="..."] may slightly affect browser performance on large pages; therefore, prefer targeting as specifically as possible.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Attribute Selector Introduction Example</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <form class="register-form">
        <input type="text" placeholder="Enter your name">
        <input type="email" placeholder="Your email address" required>
        <input type="password" placeholder="Your password">
        <button type="submit" disabled>Submit (Disabled)</button>
    </form>
</body>

</html>

/* CSS Implementation */

/* Target only text input fields */
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
}

/* Highlight required fields */
input[required] {
    border-left: 5px solid #e74c3c;
}

/* Style disabled button */
button[disabled] {
    background-color: #bdc3c7;
    color: #7f8c8d;
    cursor: not-allowed;
    padding: 10px 20px;
    border: none;
    width: 100%;
}

Introduction - Overview

While simple matching looks for "exactness," Substring Matching methods look for a "Pattern."

In the web world, data is not always fixed; URLs are dynamic, file paths are long, and data is variable.

This is where CSS offers a simplified version of the Regular Expressions logic found in the software world.

Instead of telling the browser "Find the one equal to this," you tell it to find elements that "Start with," "End with," or "Contain this word."

These operators are represented by special characters on the keyboard (*, ^, $) and answer the attribute selector's question:

"Where should I look?"

Contains Value (*=): Search Engine Logic

The asterisk symbol checks whether the specified text snippet appears anywhere within the attribute value.

Example: a[href*="google"]

Use Case: It targets all links that contain the word "google" within the href attribute.

It doesn't matter if the link starts with http, or ends with .com or .com.tr.

Anything that houses the word "google" is targeted.

Starts With Value (^=): Security and Source Control

The caret symbol mandates that the attribute value must start with the specified text.

Example: a[href^="https"] or a[href^="mailto:"]

Use Case: The first example selects only secure ( SSL ) connections and could add a green lock icon to them.

The second example selects links that open the mail application when clicked.

This is the most reliable way to style a link based on its behavior.

Ends With Value ($=): File Type Recognition

The dollar sign mandates that the attribute value must end with the specified text.

This is commonly used to target file extensions.

Example: a[href$=".pdf"]

Use Case: No matter how long the link address is, if it ends with .pdf, it is a document.

By catching these links with CSS, you can automatically place a small PDF icon next to them (using ::after).

This way, every time a new PDF is added to the site, you don't need to manually place an icon; the system handles it automatically.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Substring Matching Selectors Introduction Example</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="file-list">
        <a href="report.pdf">Download Annual Report</a>
        <a href="https://example.com">Go to External Resource</a>
        <a href="mailto:support@site.com">Send Email</a>
    </div>
</body>

</html>

/* CSS Implementation */

.file-list a {
    display: block;
    padding: 10px;
    margin: 5px 0;
    color: #333;
    text-decoration: none;
    border-left: 3px solid transparent;
}

/* ^= : Targets values that start with 'mailto:' */
a[href^="mailto:"] {
    background-color: #ecf0f1;
    color: #2980b9;
}

/* $= : Targets values that end with '.pdf' */
a[href$=".pdf"] {
    border-left-color: #e74c3c;
    font-weight: bold;
}

/* *= : Targets values that contain 'example' */
a[href*="example"] {
    background-color: #f1c40f;
    border-radius: 4px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Advanced Substring Example</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

  <div class="panel">

    <h3>Button States</h3>

    <button class="btn-primary">Save</button>
    <button class="btn-danger">Delete</button>
    <button class="btn-warning">Warn</button>

    <h3>File Types</h3>

    <a href="document.pdf">PDF File</a>
    <a href="archive.zip">ZIP File</a>
    <a href="image.png">PNG Image</a>

    <h3>Input Types</h3>

    <input type="email" placeholder="Email">
    <input type="tel" placeholder="Phone">
    <input type="text" placeholder="Text">

  </div>

</body>

</html>

body {
  font-family: sans-serif;
  background: #1e293b;
  color: white;
  padding: 30px;
}

.panel {
  max-width: 500px;
  margin: auto;
}

button[class*="btn-"] {
  padding: 10px;
  margin: 5px;
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
}

button[class*="primary"] {
  background: #3b82f6;
}

button[class*="danger"] {
  background: #ef4444;
}

button[class*="warning"] {
  background: #f59e0b;
}

a[href$=".pdf"] {
  color: #e74c3c;
}

a[href$=".zip"] {
  color: #8e44ad;
}

a[href$=".png"] {
  color: #22c55e;
}

input[type^="e"] {
  border: 2px solid #3b82f6;
}

input[type^="t"] {
  border: 2px solid #22c55e;
}

input {
  display: block;
  margin: 8px 0;
  padding: 8px;
  border-radius: 5px;
  border: none;
}

Introduction - Overview

The selectors we have learned so far targeted elements based on "Who" they were.

Combinators, however, target elements based on "Where" they are located.

These selectors connect multiple basic selectors through special symbols ( space, >, +, ~ ) to utilize

parent-child or sibling relationships within the HTML DOM tree.

This makes it possible to style not just a specific tag or class, but that tag in the context of its relationship with another element.

Thus, instead of cluttering your HTML code by adding classes to every element ( Classitis ); you can write intelligent rules such as

"Headings inside this box" or "The paragraph that comes immediately after the image."

Tip: When working with combinators, it is crucial to understand the difference between a space (descendant) and > (child). A space covers all descendants; > targets only one level down.

Example: The .card h2 selector finds all h2 tags within .card, regardless of their level.

Example: The .card > h2 selector targets only the h2 tags that are direct children of .card.

Additional Note: The + and ~ selectors target sibling elements. + selects only the immediately following sibling, while ~ covers all subsequent siblings.

By using these combinations, you can make your style code more meaningful and sustainable. Instead of adding extra classes to every element, you can write smart rules based on DOM relationships.

Function: Hierarchical Depth and Coverage

This selector treats the first element (nav) as an "Ancestor," and the second element (a) as its "Descendant."

The command given to the browser is: "Select all 'a' tags found within the boundaries of the 'nav' tag."

The critical point here is depth; the link does not need to be directly inside the nav; even if it is inside a ul list, a li item, or even a span within that; it is targeted as long as the root is nav.

It is the relationship type with the widest coverage area.

Syntax: The quietest but most powerful operator in CSS syntax, the space character, is sufficient to define this relationship.

Example: nav a

Purpose: Used to create specific themes for certain regions of a web page (e.g., #footer, .sidebar or .article-content).

For example: While links are blue throughout the site, it is ideal for ensuring that only links in the footer (footer a) are white.

Caution: Risk of Style Leakage

Although it is the most commonly used selector, being "too general" can sometimes become a disadvantage.

If you use .card a, while you think you are targeting text links inside that card; you might accidentally affect a "Buy Now" button or an icon link inside the card as well.

This is called "Style Leakage," and it can lead to CSS chaos if used uncontrollably.

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Descendant Selector (Space) Introduction Example</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <footer class="site-footer">
        <div class="location-box">
            <p>Contact us <a href="#">here</a>.</p>
        </div>
        <ul>
            <li><a href="#">Terms of Service</a></li>
        </ul>
    </footer>
</body>

</html>

/* CSS Implementation */

/* Descendant Selector (space): Targets ALL li elements inside main menu */
.main-menu li {
    list-style: none;
    font-family: sans-serif;
    color: #2c3e50;
}

/* Child Selector (>): Targets ONLY direct children of main menu.
   li elements inside sub-menu (grandchildren) will NOT get this style */
.main-menu > li {
    display: inline-block;
    padding: 15px 25px;
    background: #ffffff;
    border: 1px solid #ddd;
    margin-right: 10px;
    cursor: pointer;
}

.sub-menu {
    margin-top: 10px;
    border-top: 2px solid #3498db;
}

Definition and Syntax: Rigid Hierarchy

Unlike the tolerant space character used by the descendant selector, the Child Selector draws a strict boundary by placing a greater-than sign (>) between two elements.

Example: ul > li

This symbol gives the following order to the CSS engine: "Ignore all intermediaries in between and only look at the first-degree connection."

Function: Direct Descendant Only

This selector does not descend into the depths of the family tree. It only targets elements (li) that are the direct, "biological" children of the first selector (ul).

If another tag (for example, a div wrapper for design purposes) enters between the parent and the target element, the bond is broken and the style is not applied.

In other words, there is "no room for grandchildren" in this rule; the style inheritance only passes to the next immediate level.

Usage Strategy: Preventing Style Leakage

This rigidity is a lifesaver, especially in nested structures.

For example: In a multi-level navigation menu; it is used when you want to style only the main menu buttons and ensure that the sub-links within a dropdown are not affected by this style.

Furthermore, because the browser does not have to scan all depths of the DOM tree ( it only looks at one level down ), it is more efficient than the descendant selector in terms of performance, even if only by microseconds.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Compound Selectors Advanced Example</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

  <div class="card">
    <h2>Card Title</h2>

    <p>This is a direct child paragraph.</p>

    <div>
      <p>This is a nested (grandchild) paragraph.</p>
    </div>

    <h3>Subheading</h3>
    <p>This paragraph comes immediately after the heading.</p>
    <p>This is another sibling paragraph.</p>

  </div>

</body>

</html>

body {
  font-family: sans-serif;
  background: #1e293b;
  color: white;
  padding: 40px;
}

.card {
  max-width: 500px;
  margin: auto;
  padding: 20px;
  border-radius: 12px;
  background: #334155;
}

.card p {
  background: rgba(59, 130, 246, 0.2);
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.card > p {
  background: rgba(239, 68, 68, 0.3);
  font-weight: bold;
}

h3 + p {
  border-left: 4px solid #22c55e;
  padding-left: 10px;
}

h3 ~ p {
  color: #cbd5f5;
}

h2 {
  margin-bottom: 10px;
  color: #facc15;
}

h3 {
  margin-top: 20px;
  color: #38bdf8;
}

Definition and Syntax: The Power of the Plus Sign

Instead of descending in the family tree (to children), this selector establishes a horizontal relationship between elements at the same level. It is defined by placing a plus sign (+) between two elements.

Example: h2 + p

This syntax points to a very specific position for the browser: "Find an h2 heading and only affect the p tag immediately following it."

Function: Principle of Singularity and Proximity

The most critical feature of the adjacent sibling selector is that the selection is singular.

Only the very first sibling element (p) coming immediately after the first element (h2) is selected; any other paragraphs following it remain outside this rule.

Furthermore, the two elements must share the same parent and no other tag (not even an invisible span) should come between them in the HTML code order.

Usage Scenario: Typographic Rhythm

It is of vital importance for providing "flow" in design.

For example: Normal paragraphs might have a standard top margin (margin-top); however, a paragraph coming immediately after a heading might need its top margin removed to ensure integration with the heading, or it might require a Drop Cap.

This selector allows you to automatically detect and style this "special neighborhood" case without writing an extra class in the HTML.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Adjacent Sibling Selector Advanced Example</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

  <div class="news-card">
    <h2>Technology News</h2>

    <p>This paragraph is highlighted (because it comes immediately after).</p>

    <p>This paragraph is normal.</p>

    <span>An element in between</span>

    <p>This paragraph is no longer selected (chain is broken).</p>
  </div>

</body>

</html>

body {
  font-family: 'Segoe UI', sans-serif;
  background: #1e293b;
  color: #e2e8f0;
  padding: 40px;
}

.news-card {
  max-width: 420px;
  margin: auto;
  padding: 20px;
  border-radius: 12px;
  background: #334155;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

h2 {
  margin-bottom: 10px;
  color: #38bdf8;
}

h2 + p {
  color: #22c55e;
  font-size: 1.05rem;
  font-weight: bold;
  border-left: 4px solid #22c55e;
  padding-left: 10px;
}

p {
  margin-top: 12px;
  color: #cbd5f5;
}

span {
  display: block;
  margin-top: 12px;
  font-size: 0.85rem;
  color: #94a3b8;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Form Flow</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

  <form class="form-area">

    <label>Full Name</label>
    <input type="text" placeholder="Enter your name">

    <label>Email</label>
    <span>This field is required</span>
    <input type="email" placeholder="Enter email">

    <label>Password</label>
    <input type="password" placeholder="Password">

  </form>

</body>

</html>

body {
  font-family: 'Segoe UI', sans-serif;
  background: #0f172a;
  padding: 40px;
  color: #e2e8f0;
}

.form-area {
  max-width: 400px;
  margin: auto;
  display: flex;
  flex-direction: column;
}

label {
  margin-top: 15px;
  margin-bottom: 5px;
  font-size: 0.9rem;
  color: #94a3b8;
}

/* Only input that comes IMMEDIATELY after label */
label + input {
  border: 2px solid #3b82f6;
  padding: 10px;
  border-radius: 8px;
  outline: none;
}

/* Default input */
input {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #334155;
  margin-bottom: 10px;
  background: #1e293b;
  color: white;
}

/* Element in between */
span {
  font-size: 0.8rem;
  color: #f87171;
  margin-bottom: 5px;
}

Definition and Syntax: Broad Brotherhood

This is a more liberal selector that does not limit the sibling bond solely to being "adjacent." It is defined by placing a tilde symbol ( ~ ) between two elements.

Example: h2 ~ p

This command tells the browser: "Find an h2 heading and select all p tags that follow it and share the same parent."

Function: "All Younger Siblings" (All Following Siblings)

Unlike the adjacent sibling selector ( + ), this relationship is not limited to the element immediately following.

Even if there are other types of tags in between ( div, img, etc. ), all siblings meeting the criteria ( p ) that hierarchically follow the main element ( h2 ) are affected by this style.

Usage Scenario: Collective Style Management

Ideal for managing content following a specific "Break Point."

For example: In a blog post, it can be used to change the font or color of all paragraphs following a featured image (.featured-img).

It is also a frequently used method in lists to exclude the first item and style all other siblings.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>General Sibling (~) Advanced</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
  <div class="blog-content">
    <h1>CSS Selectors Guide</h1>

    <p>Introduction section text.</p>

    <div class="key-point">
      ⚠ Key Point: Everything after this is important
    </div>

    <p>Use selectors correctly.</p>
    <span>(Note: this span is not affected)</span>
    <p>Avoid code repetition.</p>
    <p>Consider performance.</p>
  </div>
</body>

</html>

body {
  font-family: 'Segoe UI', sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  padding: 40px;
}

.blog-content {
  max-width: 500px;
  margin: auto;
}

h1 {
  margin-bottom: 20px;
  color: #38bdf8;
}

p {
  margin: 12px 0;
  padding: 10px;
  border-radius: 6px;
  background: #1e293b;
  transition: 0.3s;
}

.key-point {
  margin: 20px 0;
  padding: 12px;
  border-radius: 8px;
  background: #f59e0b;
  color: #1e293b;
  font-weight: bold;
}

.key-point ~ p {
  background: #1e293b;
  border-left: 4px solid #f59e0b;
  transform: translateX(6px);
  color: #fcd34d;
}

.key-point ~ p:hover {
  transform: translateX(10px);
  background: #334155;
}

span {
  display: block;
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 8px 0;
}