HTML CSS - Selectors

Using CSS selectors to style elements

CSS selectors are used to select the HTML elements you want to style. Selectors allow you to target specific elements, groups of elements, or elements based on their attributes or state. This tutorial covers the various types of CSS selectors and how to use them to style elements.

Element Selector

The element selector selects elements based on the element name. For example, to style all <p> elements:

p {
    color: blue;
}
            

Class Selector

The class selector selects elements with a specific class attribute. Class selectors start with a period (.). For example, to style elements with the class "intro":

.intro {
    font-size: 18px;
}
            

HTML example:

<p class="swf-lsn-intro">This is an introductory paragraph.</p>
<div class="swf-lsn-intro">This is an introductory section.</div>
            

ID Selector

The ID selector selects elements with a specific id attribute. ID selectors start with a hash (#). For example, to style an element with the id "header":

#header {
    background-color: lightgray;
}
            

HTML example:

<div id="header">This is the header.</div>
            

Universal Selector

The universal selector selects all elements on the page. It is represented by an asterisk (*). For example, to remove all margins and padding from all elements:

* {
    margin: 0;
    padding: 0;
}
            

Attribute Selector

The attribute selector selects elements based on an attribute or attribute value. For example, to style links that open in a new tab:

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

HTML example:

<a href="https://example.com" target="_blank">Visit Example.com</a>
            

Group Selector

The group selector allows you to apply the same styles to multiple selectors. Separate each selector with a comma. For example, to style all <h1>, <h2>, and <h3> elements:

h1, h2, h3 {
    color: navy;
}
            

Descendant Selector

The descendant selector targets elements that are descendants of a specified element. For example, to style all <em> elements inside <p> elements:

p em {
    color: green;
}
            

HTML example:

<p>This is a <em>highlighted</em> word.</p>
            

Child Selector

The child selector targets elements that are direct children of a specified element. For example, to style all <li> elements that are direct children of <ul> elements:

ul > li {
    font-weight: bold;
}
            

HTML example:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
</ol>
            

Adjacent Sibling Selector

The adjacent sibling selector targets an element that is the next sibling of a specified element. For example, to style the first <p> element that immediately follows a <h1> element:

h1 + p {
    margin-top: 0;
}
            

HTML example:

<h1>Title</h1>
<p>This paragraph is immediately after the h1 element.</p>
<p>This paragraph is not immediately after the h1 element.</p>
            

General Sibling Selector

The general sibling selector targets all elements that are siblings of a specified element. For example, to style all <p> elements that are siblings of an <h1> element:

h1 ~ p {
    color: gray;
}
            

HTML example:

<h1>Title</h1>
<p>This paragraph is a sibling of the h1 element.</p>
<p>This paragraph is also a sibling of the h1 element.</p>
            

Pseudo-class Selector

Pseudo-class selectors target elements based on their state or position. For example, to style links when they are hovered over:

a:hover {
    color: orange;
}
            

HTML example:

<a href="https://example.com">Hover over this link</a>
            

Pseudo-element Selector

Pseudo-element selectors target specific parts of an element. For example, to style the first letter of a paragraph:

p::first-letter {
    font-size: 200%;
    color: red;
}
            

HTML example:

<p>This is a paragraph with a styled first letter.</p>
            

Summary

In this tutorial, you learned about various CSS selectors and how to use them to style HTML elements. CSS selectors allow you to target specific elements, groups of elements, or elements based on their attributes or state. Understanding and using different types of selectors is essential for applying styles effectively and precisely in web design.