Selectors in CSS are for identifying specific HTML elements to apply styles to. They are part of CSS rules, where a selector targets an element, and a declaration block defines the styles to be applied.
How many selectors are in CSS?
There are 5 types of Selectors in CSS.
- Basic selectors: element (type), class, and ID selectors.
- Attribute selectors.
- Substring matching attribute selectors.
- Chaining attribute selectors.
- Combinators Selectors
Basic Selectors
Element (Type) Selectors:
Element selectors, also known as type selectors or tag selectors, target all HTML elements of a specific type. The selector is simply the name of the HTML tag.
Element selectors have a low level of specificity. They fall into the ‘c’ group with a specificity value of 0,0,1 (still not clearly stated in this format, the order implies this with IDs being highest and classes/attributes being in between)
Code Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
}
h3 {
text-align: center;
}
</style>
</head>
<body>
<h3>This is a heading</h3>
<p>This is a paragraph. All paragraph elements on this page will be blue.</p>
<p>Another paragraph.</p>
</body>
</html>In this example, the p selector targets all <p> elements, making their text blue. The h3 selector targets all <h3> elements, centering their text.
Class Selectors:
Class selectors target HTML elements have a specific value in their class attribute. You define a class selector by starting with a period (.) followed by the class name. The class attribute can be applied to multiple HTML elements.
Class selectors have a higher specificity than element selectors. They belong to the ‘B’ group with a specificity value of 0,1,0. Multiple class names can be applied to an element, and you can target elements with multiple specific classes using compound selectors.
Code Example:
<!DOCTYPE html>
<html>
<head>
<style>
.note {
background-color: yellow;
padding: 10px;
border: 1px solid gray;
}
p.special { /* Targets only <p> elements with the class "special" */
font-weight: bold;
}
</style>
</head>
<body>
<p class="note">This paragraph has the class "note".</p>
<p>This is a regular paragraph.</p>
<div class="note">This div also has the class "note".</div>
<p class="note special">This paragraph has both "note" and "special" classes.</p>
</body>
</html>Here, all elements with the class note will have a yellow background, padding, and a gray border. The selector p.special targets <p> elements have both the note and special classes, making their text bold.
ID Selectors
ID selectors are used to target a single, unique HTML element within a document based on the value of its id attribute. You define an ID selector by starting with a hash symbol (#) followed by the ID value. The id attribute should be unique across the entire HTML document.
ID selectors have the highest specificity between the basic selectors. They belong to the ‘A’ group with a specificity value of 1,0,0. This high specificity means that ID styles will generally override class and element styles that target the same element.
Code Example:
<!DOCTYPE html>
<html>
<head>
<style>
#main-header {
color: green;
font-size: 2em;
}
#introduction {
border: 2px solid black;
padding: 15px;
}
</style>
</head>
<body>
<h1 id="main-header">Welcome to My Page</h1>
<div id="introduction">
<p>This is the introductory section of the page. Only this div will have the specified border and padding.</p>
</div>
<p>This is another paragraph.</p>
</body>
</html>In this example, the h1 element with the ID main-header will have green text and a font size of 2em. The div element with the ID introduction will have a black border and padding. Because IDs are unique, these styles will only apply to these specific elements.
Understanding and using element, class, and ID selectors effectively is the foundation of styling web pages with CSS. They allow you to target and style specific parts of your HTML structure.
Attribute selectors
CSS attribute selectors are used to target HTML elements based on the presence or value of their attributes. They allow for more specific styling than basic element, class, or ID selectors. Attribute selectors can be used with various operators to refine the selection criteria.
Simple Attribute Selector:
Syntax: E[attr]
Description: Selects all elements E that have the attribute attr, regardless of its value.
Code Example:
<!DOCTYPE html>
<html>
<head>
<style>
img[alt] {
border: 3px dashed #e15f5f;
}
</style>
</head>
<body>
<img src="image1.jpg" alt="A description">
<img src="image2.jpg">
</body>
</html>In this example, the rule will apply a dashed red border to the first <img> element because it has the alt attribute. The second <img> element will not be affected.
Exact Attribute Value Selector:
Syntax: E[attr=”value”]
Description: Selects all elements E that have the attribute attr with the exact value “value”.
Code Example:
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
margin-right: 10px;
}
</style>
</head>
<body>
<label><input type="checkbox" name="option1" value="yes"> Option 1</label><br>
<label><input type="radio" name="option2" value="a"> Option A</label>
</body>
</html>This CSS will add a right margin only to the <input> elements where the type attribute is exactly equal to “checkbox”.
“Contains Word” Attribute Selector:
Syntax: E[attr~=”value”]
Description: Selects all elements E whose attribute attr has a value that is a space-separated list of words, one of which is exactly equal to “value”.
Code Example:
<!DOCTYPE html>
<html>
<head>
<style>
p[title~="important"] {
font-weight: bold;
}
</style>
</head>
<body>
<p title="This is important information">This paragraph will be bold.</p>
<p title="Information that is key">This paragraph will not be bold.</p>
<p title="Very important stuff">This paragraph will be bold.</p>
</body>
</html>The CSS will bold the paragraphs whose title attribute contains the word “important” as a separate word.
“Hyphen-Separated Values” Attribute Selector:
Syntax: E[attr|=”value”]
Description: Selects all elements E whose attribute attr has a value exactly equal to “value” or starts with “value” followed by a hyphen (-). This is particularly useful for language attributes.
Specificity: Has the same specificity as a class selector (0,1,0).
Code Example:
<!DOCTYPE html>
<html>
<head>
<style>
p[lang|="en"] {
color: blue; /* Style English text */
}
</style>
</head>
<body>
<p lang="en">This is English.</p>
<p lang="en-US">This is American English.</p>
<p lang="fr">This is French.</p>
</body>
</html>This CSS will make the text of <p> elements with the lang attribute set to “en” or starting with “en-” blue.
substring matching attribute selectors
“Begins With” Attribute Selector (CSS3):
Syntax: E[attr^=”value”]
Description: Selects all elements E whose attribute attr value begins with the string “value”.
Code Example:
<!DOCTYPE html>
<html>
<head>
<style>
a[href^="https"] {
color: green; /* Style secure links */
}
</style>
</head>
<body>
<a href="http://example.com">Regular link</a><br>
<a href="https://secure.example.com">Secure link</a>
</body>
</html>This CSS will make the text of any <a> element whose href attribute starts with “https” green, indicating a secure link.
“Ends With” Attribute Selector (CSS3):
Syntax: E[attr$=”value”]
Description: Selects all elements E whose attribute attr value ends with the string “value”.
Code Example:
<!DOCTYPE html>
<html>
<head>
<style>
a[href$=".pdf"] {
font-weight: bold; /* Style PDF links */
}
</style>
</head>
<body>
<a href="document.html">HTML Document</a><br>
<a href="report.pdf">PDF Report</a>
</body>
</html>This CSS will bold the text of any <a> element whose href attribute ends with “.pdf”, helping users identify links to PDF files.
“Contains Substring” Attribute Selector (CSS3):
Syntax: E[attr*=”value”]
Description: Selects all elements E whose attribute attr value contains the substring “value” anywhere within it.
Code Example:
<!DOCTYPE html>
<html>
<head>
<style>
a[title*="image"] {
text-decoration: underline; /* Style links with "image" in the title */
}
</style>
</head>
<body>
<a href="#" title="View image gallery">Image Gallery</a><br>
<a href="#" title="About our company">Our Company</a><br>
<a href="#" title="Download large image">Download Image</a>
</body>
</html>This CSS will underline the text of any <a> element whose title attribute contains the string “image”.
Chaining Attribute Selectors:
You can also chain multiple attribute selectors together to target elements that match all the specified attribute conditions.
<!DOCTYPE html>
<html>
<head>
<style>
li[data-todo-type="exercise"][data-location="indoor"] {
font-style: italic;
}
</style>
</head>
<body>
<ul>
<li data-todo-type="exercise" data-activity-name="running" data-location="indoor">Running</li>
<li data-todo-type="exercise" data-activity-name="swimming" data-location="indoor">Swimming</li>
<li data-todo-type="chore" data-activity-name="cleaning" data-location="indoor">Cleaning</li>
</ul>
</body>
</html>In this example, only the <li> elements that have both data-todo-type set to “exercise” and data-location set to “indoor” will have italic text.
HTML5 Data Attributes:
HTML5 introduced data-* attributes to provide a standard way to embed custom data in HTML elements. Attribute selectors are ideal for targeting these data attributes.
<!DOCTYPE html>
<html>
<head>
<style>
[data-status="complete"] {
text-decoration: line-through;
color: gray;
}
</style>
</head>
<body>
<li data-task-id="1" data-status="complete">Buy groceries</li>
<li data-task-id="2" data-status="pending">Walk the dog</li>
</body>
</html>Here, the CSS will apply a strikethrough and gray color to the list item that has the data-status attribute set to “complete”.
Attribute selectors offer powerful ways to style elements based on their attributes, enhancing the flexibility and specificity of your CSS rules. They are well-supported in modern browsers. Remember that in HTML, attribute selector values are generally case-insensitive, while in XML they are case-sensitive.
CSS3 Topics