CSS Selectors

Tag (Element) selectors
Class selectors
ID selectors
Attribute selectors
Pseudo selectors

1. Tag (Element) Selectors

These selectors target HTML elements directly by their tag name. Syntax:

tagname {
   property: value;
}

Example: Target all paragraphs (<p>):

p {
   color: blue;
   font-size: 16px;
}

2. Class Selectors

These selectors target HTML elements with a specific class attribute.

Multiple elements can share the same class. Syntax:

.classname {
   property: value;
}

HTML:

<p class="highlight">Hello!</p>
<div class="highlight">World!</div>

CSS:

.highlight {
   background-color: yellow;
}

3. ID Selectors

ID selectors target elements based on their unique ID attribute. IDs must be unique within a page. Syntax:

#idname {
   property: value;
}

HTML:

<h1 id="main-title">CSS Selectors</h1>

CSS:

#main-title {
   font-size: 30px;
   color: purple;
}

4. Attribute Selectors

Attribute selectors target HTML elements that have specific attributes or attribute-values. Syntax:

element[attribute] { ... }
element[attribute="value"] { ... }
element[attribute^="value"] { ... } /* begins with */
element[attribute$="value"] { ... } /* ends with */
element[attribute*="value"] { ... } /* contains */

HTML:

<input type="text" placeholder="Your name">
<input type="email" placeholder="Your email">

CSS Examples:

Select inputs with a type attribute:

input[type] {
   border: 1px solid blue;
}

Select inputs with a specific attribute-value:

input[type="email"] {
   background-color: lightyellow;
}

Select elements with attribute starting with "Your":

input[placeholder^="Your"] {
   padding: 10px;
}

5. Pseudo Selectors

Pseudo selectors target elements based on their state, position, or other special characteristics.

a. Pseudo-classes: Represent special states. Syntax:

element:pseudo-class { ... }

Example: Style link on hover

a:hover {
   color: red;
   text-decoration: underline;
}

Common Pseudo-classes:

Pseudo-class	Meaning	Example
``:hover`	Mouse hover	`button:hover`
`:active`	During click	`button:active`
`:focus`	Focused state (like form input)	`input:focus`
`:visited`	Visited links	`a:visited`
`:first-child`	First child of parent	`li:first-child`

Example (focus):

input:focus {
   outline: 2px solid green;
}

b. Pseudo-elements: Represent specific parts of elements. Syntax: (uses double colon)

element::pseudo-element { ... }

Example: Style first letter of paragraph:

p::first-letter {
   font-size: 30px;
   color: purple;
}

Common Pseudo-elements:

Pseudo-element	Meaning	Example
`::before`	Insert content before element	`div::before`
`::after`	Insert content after element	`span::after`
`::first-line`	Targets first line of text	`p::first-line`
`::first-letter`	Targets first letter of text	`h1::first-letter`

Example (before/after):

.link::before {
   content: "→ ";
}

.link::after {
   content: " ←";
}

HTML:

<span class="link">Next Page</span>

Summary & Quick Reference

Type	Usage	Example
Element Selector	Direct tag name	`div {}`
Class Selector	Multiple-use class	`.title {}`
ID Selector	Single unique identifier	`#header {}`
Attribute Selector	Select by attributes	`input[type="text"] {}`
Pseudo-class	Elements’ state	`button:hover {}`
Pseudo-element	Parts of element	`p::first-letter {}`

CSS Selectors

On this page