css selectors

CSS Selectors

by

CSS selectors are the foundational tools that allow web developers to target and style specific HTML elements. This blog will dive deep into the CSS selectors, from the most basic tag and class selectors to the more complex attribute, pseudo-class, and pseudo-element selectors. Understanding how to use these selectors is key to writing cleaner, more maintainable, and highly specific stylesheets, ultimately paving the way for better web design and development.

If you have not checked my past article about CSS Guide then you can check it here.

We can divide CSS selectors into 5 categories:

  1. Simple Selectors
  2. Combinator Selectors
  3. Pseudo-class Selectors
  4. Pseudo-element Selectors
  5. Attribute selectors

1 – Simple Selectors

Simple selectors select elements based on name, id, and class.

<style>
h1 {background-color: #808080;}
</style>
<body>
<h1>CSS Selectors</h1>
</body>
<style>
#primary-header {background-color: #808080;}
</style>
<body>
<h1 id="primary-header">CSS Selectors</h1>
</body>
<style>
.primary-header {background-color: #808080;}
</style>
<body>
<h1 class="primary-header">CSS Selectors</h1>
</body>

2 – Combinator Selectors

A combinator is something that explains the relationship between the selectors. There are 4 different combinators in CSS.

2.1 – descendant selector (space)

The CSS descendant combinator (a single space) selects elements inside elements. The following example selects all <p> elements inside <div> elements.

<style>
div p {background-color: #808080;}
</style>
<body>
<div>
         <p>Combinator Selectors</p>
</div>
</body>
2.2 – child selector (>)

The child combinator selects all elements that are direct children of a specified element. The following example selects all <p> elements that are direct children of <div>.

<style>
div > p {background-color: #808080;}
</style>
<body>
<div>
         <p>Child Selector</p>
         <p>Child Selector example</p>
         <section>
              <!-- This is not direct children of div. -->
              <p>Another paragraph.</p>
         </section>
</div>
</body>
2.3 – adjacent sibling selector (+)

adjacent sibling selector select an element that is directly after a specific element. The following example selects the first <p> element that immediately follows a <div>.

<style>
div + p {background-color: #808080;}
</style>
<body>
<div>
         <p>Adjacent Sibling Selector</p>
</div>
           <p>Next sibling selector</p>
</body>
2.4 – general sibling selector (~)

general sibling selector selects all elements that are next siblings of a specified element. The following example selects all <p> elements that are next siblings of <div>.

<style>
div ~ p {background-color: #808080;}
</style>
<body>
<div>
         <p>General Sibling Selector</p>
</div>
           <p>Subsequent sibling selector</p>
           <span>Some text.</span>
           <p>Another paragraph.</p>
</body>

3 – Pseudo-class Selectors

A Pseudo-class defines a style for a special state of an element. We can use pseudo-class in many ways:

  • Style an element when a user mouses over it
  • Style visited and unvisited links differently
  • Style an element when it gets focus

Here is an example of using the :hover pseudo-class on a <div> element:

<style>
div:hover {background-color: #808080;}
</style>
<body>
<div>
         <p>Pseudo class selector examples</p>
</div>
</body>

Here is an example of using the :focus pseudo-class to style an <input> field when it gets focus:

<style>
input:focus {background-color: #808080;}
</style>
<body>
<div>
         <form action="#" method="get">
                       <input type="text" name="fname"><br>
         </form>
</div>
</body>

4 – Pseudo-element Selectors

A pseudo-element is used to style specified parts of an element. It can be used in many ways.

  • Style the first letter, or line of an element
  • Insert content before or after of an element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

<style>
p::first-letter {font-size: 36px;}
</style>
<body>
<div>
         <p>Pseudo-element Selectors</p>
</div>
</body>

The ::before and ::after pseudo-elements are used to insert some content before or after the content of a specified element.

<style>
p::before {content: "Read this:";}
p::after {content: "Remember this - ";}
</style>
<body>
<div>
         <p>Pseudo-element Selectors</p>
</div>
</body>

5 – Attribute Selectors

CSS attribute selectors are used to select and style HTML elements with a specific attribute or attribute value, or both.

The following example selects all <a> elements with a target attribute:

<style>
a[target] {background-color: #808080;}
</style>
<body>
<div>
         <a href="#" target="_top">Attribute Selectors</p>
</div>
</body>

The following example selects all <a> elements with a target=”_blank” attribute:

<style>
a[target="_blank"] {background-color: #808080;}
</style>
<body>
<div>
         <a href="#" target="_blank">Attribute Selectors</p>
</div>
</body>

The following example selects all elements with a class attribute that contains a space-separated list of words, one of which is “text”

<style>
p[class~="text"] {background-color: #808080;}
</style>
<body>
<div>
         <p class="text">Top Paragraph!</p>
         <p class="text primary">Primary Paragraph!</p>
</div>
</body>

The [attribute|="value"] selector selects elements with the specific attribute, whose value can be exactly the specific value, or start with the specific value followed by a hyphen (-).

<style>
p[class|="top"] {background-color: #808080;}
</style>
<body>
<div>
         <p class="top">Welcome!</p>
         <p class="top-text">Top Paragraph!</p>
</div>
</body>

The [attribute^="value"] selector selects elements with the specific attribute, whose value starts with a specific value. The following example selects all elements with a class attribute value that starts with “top”.

<style>
p[class^="top"] {background-color: #808080;}
</style>
<body>
<div>
         <p class="top">Welcome!</p>
         <p class="topcenter">Top Center Paragraph!</p>
</div>
</body>

The [attribute$="value"] selector selects elements whose attribute value ends with a specific value. The following example selects all elements with a class attribute value that ends with “test”.

<style>
p[class$="test"] {background-color: #808080;}
</style>
<body>
<div>
         <p class="primary_test">Welcome!</p>
         <p class="secondary-test">Test Paragraph!</p>
</div>
</body>

The [attribute*="value"] selector selects elements whose attribute value contains a specific value. The following example selects all elements with a class attribute value that contains “te”.

<style>
p[class*="te"] {background-color: #808080;}
</style>
<body>
<div>
         <p class="test">Welcome!</p>
         <p class="first_test">Test Paragraph!</p>
</div>
</body>

CSS Selectors are the fundamental tool for applying styles. You use them to target a specific element, a group of elements, or elements based on their attributes, allowing you to precisely control styling across your web page. Below is a full example illustrating the most common selector types. Feel free to use this example to experiment and gain a clearer understanding of how different selectors work.

See the Pen CSS Selectors by Code Hacks (@code-hacks) on CodePen.

Leave a Comment