DEV Community

Cover image for Get Comfortable With CSS Selectors
Cess
Cess

Posted on • Originally published at cesscode.hashnode.dev

Get Comfortable With CSS Selectors

#css #html #webdev #beginners

HTML and CSS to a front-end developer are like a knife and a fork to a chef. The more you get used to using HTML and CSS skills together, the better a front-end developer you will become.

And the best way to learn how to use these skills together is to understand the different CSS Selectors.

This blog will look at the different types of CSS selectors and how you can use them to build efficient CSS code.

let's get started 💃

What are CSS Selectors?

CSS selectors is the opening part of a CSS ruleset, it determines how you apply styles to HTML elements on a web page.

There are many different types of CSS selectors, each with its own unique syntax. These tell the browser which elements to apply CSS property values to.

The element or elements targeted by a CSS selector are the “subject of the selector.”

You can select a subject based on its element type, class, ID name, or pseudo-state.

CSS selectors are case-sensitive, they must match element names and attribute values exactly.

A .coding class selector is not the same as .CODING

It is advisable to use small letters to avoid making mistakes.

The syntax for CSS Selector is:

selector {
CSS-property: value;
}
Enter fullscreen mode Exit fullscreen mode

There are two types of CSS selectors:

  • Basic CSS selectors.
  • Advanced CSS selectors.

BASIC CSS SELECTORS

Basic CSS selectors are the most common type of CSS selectors. They style specific elements on a website, in the basic selectors we have selectors such as:

  • CSS class Selectors
  • CSS ID Selectors
  • Element Type Selectors
  • CSS Universal Selectors

The CSS Class Selector

The CSS class selector identifies an element based on its class attribute. You can use CSS class selectors to style many HTML elements.

You can use the CSS class selector on any HTML element.

To select elements with a specific class, write a period (.) character, followed by the class name.

The syntax for CSS Class Selector is:

.class-name {
property: value;
}
Enter fullscreen mode Exit fullscreen mode

Examples of CSS Class selector:

In the example below ⬇️ the <p> element has a class="text"

<p class="text">When will manchester united win a trophy again?</p>
Enter fullscreen mode Exit fullscreen mode

To select the <p> element using the CSS class selector, we:

.text {
  text-align: center;
  color: orange;
  font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

All Html element with class="text" will align to the center, have orange text color and a font-size of 20px.

Remember you can use the CSS class selector to style many HTML elements right?

let us see how it works 🙂

I want both the <p> and the <button> element to have the same exact CSS style, so I give both the same class="code".

<h1>Football<h1>
<p class="code">When will manchester united win a trophy again?</p>
<h2>Rejoice</h2>
<button class="code">Submit</button>
Enter fullscreen mode Exit fullscreen mode

I hope you noticed that both the <p> and the <button> element have the same class="code" in the above ⬆ example? 🤔

.code {
  text-align: center;
  color: green;
  font-size: 18px;
}
Enter fullscreen mode Exit fullscreen mode

The <p> and <button> in the example above ⬆ will have the same text color, font size, and will align to the center of the web page.

You can also specify that a class should affect only a specific HTML element

In the example below ⬇️ both the <p> and the <button> element have the same class="code".

<h1>Football<h1>
<p class="code">When will manchester united win a trophy again?</p>
<h2>Rejoice</h2>
<button class="code">Submit</button>
Enter fullscreen mode Exit fullscreen mode

I want to style only the <p> element, How do we do that?

Remember both the <p> and <button> have the same class name.

p.code {
  text-transform: capitalize;
  color: orange;
  font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆ only paragraph <p> elements with class="code" will be orange, and have a font-size of 20px. It won't affect the <button> element.

The CSS Id Selector

The CSS Id selector identifies an element based on its ID attribute. ID selector is unique and you should only use them once per page to select one unique element.

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The syntax for CSS id Selector is:

#id-name {
property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of CSS Id Selector

In the example below ⬇ the <p> element has a id="coding"

<p id="coding">football is no longer fun</p>
Enter fullscreen mode Exit fullscreen mode

To select the <p> element using the CSS Id selector, we:

#coding {
  text-align: center;
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆, the CSS rule will apply to the HTML element with id="coding".

Remember that the Id Class selector is a unique identifier. It means that in an HTML document, you can't have more than one element with the same id; you can only select one element.

Use Id selectors rarely and only on elements that need to always appear the same.

What Is the Difference Between CSS Class selectors and Id selector?

You can repeat the same CSS class selector value across many Html elements but you can only use an ID once.

Element Type Selectors

Element Type Selectors are the most common basic CSS selectors. They select HTML elements based on the element name.

The syntax for Element Type Selector is:

element {
property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Element Type Selectors:

p {
text-align: center;
font-size: 20px;
color: red;
}
Enter fullscreen mode Exit fullscreen mode

In the above ⬆ example, all paragraph <p> elements will align to the center, have a font size of 20px, and text color of red.

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Every HTML element, from the <header> to the <footer>,' follows the universal selector's style.

The asterisk (*) character represents Universal selectors.

The syntax for Universal Selector is:

* {
CSS-Property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of CSS Universal Selector

* {
text-align: center;
text-transform: Uppercase;
}
Enter fullscreen mode Exit fullscreen mode

Every single element on the web page will align to the center of the page and have uppercase letters.

The CSS Grouping Selector

CSS grouping selectors select all the HTML elements with the same style definitions.

CSS grouping selectors save time and help you to write clearer codes.

You may want to apply the same exact styles to several Html components at times. For example, all your <h1>, <h2>, and <h3> elements should have a red background, a font-weight of 700 and a font-size of 28px.

One approach is to style each HTML element in your CSS stylesheet, <h1>, <h2> and <h3> as different selectors . There's nothing wrong with this, but if you do it, you'll get a CSS stylesheet full of repeated declarations.

A better solution is to use one CSS ruleset with many declarations separated by a comma(,).

Take a close look at the CSS codes below ⬇️; you'll see that the <h1>, <h2>, and <h3> elements all have the same CSS style.

h1 {
background-color: red;
color: white;
font-weight: 700;
font-size: 28px;
text-align: center;  
}

h2 {
background-color: red;
color: white;
font-weight: 700;
font-size: 28px;
text-align: center;
}

h3 {
background-color: red;
color: white;
font-weight: 700;
font-size: 28px;
text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️ we gave <h1>, <h2>, <h3> the same exact CSS style, will it work that way? Yes, it will work but it will be better to group the selectors to avoid repetition and make our codes easier to read.

To group selectors, we separate each selector with a comma(,).

Let's group the above CSS codes with a Comma (,) 😄

h1, h2, h3 {
background-color: red;
color: white;
font-weight: 700;
font-size: 28px;
text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

  • It's possible for us to use comma(,) to group them together because <h1>, <h2>, <h3> have the same exact CSS styles.

  • The selectors don't have to match before you group them, as long as you give them the same exact CSS styling. For example, we can group <h1> with <button> with <p> as long as we give them the same styles.

  • We can also group a CSS Class selector with ID selectors if we want them to have the same exact CSS styling.

<h1 id="tech">Coding is life</h1>
<p class="future">Coding is fun</p>
Enter fullscreen mode Exit fullscreen mode

To group the above Example:

#tech,
.future {
font-size: 20px;
color: red;
text-transform: capitalize;
}
Enter fullscreen mode Exit fullscreen mode

Remember we use the Comma(,) cause we want them to have the same exact CSS style.

What do we do when <h1>, <h2>, and <h3> have a few comparable CSS stylings but different font sizes and colors?

/*group the selectors cause they have the same styles*/
h1,
h2,
h3 {
text-align: center;
text-transform: uppercase;
}


/*apply individual styles to all 3 selectors*/
h1 {
font-size: 30px;
color: red;
}

h2 {
font-size: 25px;
color: orangered;
}


h3 {
font-size: 20px;
color: green;
}
Enter fullscreen mode Exit fullscreen mode

h1, h2, and h3 all have text-align: center; text-transform: uppercase; so I grouped them.

font size and color are different for h1, h2, h3, so I applied the font size and color to all three selectors.

I hope you understand basic CSS selectors? 😄.

Let's move on to Advanced CSS Selectors.

ADVANCED CSS SELECTORS

Advanced CSS selectors enable us to do more than what Basic CSS allows us to do.

In advanced CSS selectors we have the following:

  • Combination Selectors.
  • Pseudo-class-selectors.
  • CSS Attribute Selectors.

COMBINATION SELECTORS

Combination Selectors select elements based on a specific relationship between them.

There are 4 types of combination selectors:

  • Descendant selectors.
  • Child selectors.
  • Adjacent sibling selectors.
  • General sibling selectors.

CSS selectors rely on the HTML Family Tree. It's vital to grasp the relationships between HTML elements before I go further.

The HTML family tree is also referred to as the HTML document tree.

The family tree consists of descendants, parents, children, and sibling elements.

  • A parent element contains other elements.

  • The child element is an element that is immediately contained by another element.

  • A sibling is an element that shares the same parent with another element.

1 <div>
2 <img src="" alt="">

3 <article>
4 <h1>coding is life</h1>
5 <p>Code everyday</p>
6 </article>

7 <aside>
8 <h2>Make out time to take care of yourself as a developer</h2>
9 <p>It's okay to read something else other than a coding book</p>
10 </aside>

</div>
Enter fullscreen mode Exit fullscreen mode

In the example above:

  • The <div> is the parent.

  • The <img> in line 2, <article> in line 3 and the <aside> element in line 7 are the children of the <div>.

  • The <article> element in line 3 is the parent of the <h1> in line 4 and the <p> element in line 5.

  • The <h1> in line 4 and the <p> element in line 5 are siblings with the same parent <article> element.

  • The <h1> in line 4 and the <p> element in line 5 are the children of the <article> and the grandchildren of the <div> element

  • The <aside> element in line 7 is the parent of the <h2> in line 8 and the <p> element in line 9.

Let's take a look at each of these selectors one by one, using examples to help us grasp how they function 😄.

Descendant Combinator Selectors

Descendant Combinator selectors match all elements that are descendants of a specified element.

Descendant Combinator selectors select the children, grand-children e.tc when used.

To select Descendants use multiple selectors separated by spaces.

The syntax for Descendant Combinator Selector is:

selector1  selector2 {
property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example 0f Descendant Combinator selector:

1 <h2>Coding is Fun</h2>

2 <article>

3 <h2>Cess - The Frontend Web developer</h2>
4 <p>I will be working as a full-time frontend web developer by this time next year</p>
5 <div>
6 <h2>Coding is life</h2>
7 <p>I prefer using CSS flexbox to Grid</p>
8 </div>

9 </article>
Enter fullscreen mode Exit fullscreen mode

In the above example:

  • <h2> element in line 1 is outside the <article> element

  • <h2> in line 3, <p> in line 4 and <div> elements in line 5 are the children of the <article> element

  • <h2> in line 6 and <p> element in line 7 are the children of the <div> element in line 5 which makes them the grandchildren
    of the <article> element

Remember Descendant selector selects both the children and the grand-children when used.

let's style all the <h2> inside the article element using the Descendant selector:

article h2 {
  text-align: center;
  color: orange;
  font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

The above ⬆️ example selects all <h2>' elements within the <article>' element because they are within the <h2>' element.

Child Combinator Selectors

Child selectors match an element that is an immediate child of another element.

The Child Combinator Selectors selects only the child elements.

Child combinator selector does not select the grandchildren elements like the Descendant selector.

The greater-than sign (>) character is often used to represent a child selector.

You place the greater than sign (>) between the parent and child element.

The syntax for Child Combinator Selector is:

Parent-selector > Child-selector {
property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example 0f Child Combinator selector:

1 <h2>Coding is Fun</h2>

2  <article>

3 <h2>Cess - The Frontend Web developer</h2>
4 <p>I will be working as a full-time frontend web developer by this time next year</p>

5 <div>
6 <h2>Coding is life</h2>
7 <p>I prefer using CSS flexbox to Grid</p>
8  </div>
9  </article>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ Html code:

article > h2 {
  text-align: center;
  color: orange;
  font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

  • The above ⬆️ example will target only the <h2> element in line 3 cause it falls within the <article> element.

  • It will ignore any <h2> that is outside of the <article> element or contained inside another element.

What is the difference between Descendant Combinator Selector and Child Combinator Selector?

The child combinator selector ( > ) targets an element that is a child of its parent. It does not target descendants beyond the children.

The descendant combinator selects all the children or grandchildren of a given element.

Adjacent sibling selectors

The Adjacent sibling selects an element that is after another specific element.

Sibling elements must have the same parents. They must be immediately following each other.

The plus (+) character represents adjacent sibling selectors.

The syntax for Adjacent sibling selector is:

first-sibling-selector + second-sibling-selector {
property: value;
}
Enter fullscreen mode Exit fullscreen mode

The way you read this combinator is from right to left.

  • The first sibling element comes first.

  • The second sibling element comes second and is the targeted element. the targeted element is the element you intend styling

Example 0f Adjacent sibling selector:

1 <h2>Coding is Fun</h2>

2  <article>

3 <h2>Cess - The Frontend Web developer</h2>
4 <p>I will be working as a full-time frontend web developer by this time next year</p>

5 <div>
6 <h2>Coding is life</h2>
7  </div>
8  </article>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ Html code:

h2 + P {
  text-align: center;
  color: orange;
  font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

The above ⬆️ example will target only the <p> element in line 4. It is exactly after the <h2> element and they both share the same parent element.

Remember the Adjacent sibling selects the second sibling when it appears right after the first sibling element and they share the same parent.

General sibling selectors

General sibling selectors select the elements that follow and share the same parent.

It is not necessary that the second element immediately follows the first element.

The tilde (~) character represents general sibling selectors.

The syntax for General sibling selector is:

first-sibling-selector ~ second-sibling-selector {
property: value;
}
Enter fullscreen mode Exit fullscreen mode

  • The first sibling element comes first.

  • The second sibling element comes second and is the targeted element. The targeted element is the element you intend styling

Example 0f General sibling selector:

1 <h2>Coding is Fun</h2>

2  <article>

3 <h2>Cess - The Frontend Web developer</h2>
4  <img src="...." alt="...">
5 <p>I will be working as a full-time frontend web developer by this time next year</p>

5 <div>
6 <h2>Coding is life</h2>
7  </div>
8  </article>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ Html code:

h2 ~ p {
  text-align: center;
  color: orange;
  font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

The above ⬆️ example will target only the <p> element in line 5. It is exactly after the <h2> element in line 3 and they both share the same parent element.

General sibling selector will operate when both sibling elements have the same parent.

As long as the siblings have the same parent, it doesn't matter if they are born immediately after each other.

CSS ATTRIBUTE SELECTORS

Attribute selectors select all elements that have a given attribute or attribute value.

An attribute is a piece of the markup language used to change how an HTML element behaves or displays.

You include attributes in an HTML element's opening tag

Example

<a href="https://www.twitter.com/cessss_" target="_blank">Connect with me on twitter</a>
Enter fullscreen mode Exit fullscreen mode

In the example above target="_blank" is an attribute of the anchor tag`

The syntax for Attribute Selector is:


selector[attribute] {
property: value;
}

There are 7 types of Attribute selectors:

  • Present Attribute Selector
  • Equals Attribute Selector
  • Begins With Attribute Selector (^)
  • Ends With Attribute Selector ($)
  • Contains Attribute Selector (*)
  • Attribute Spaced Attribute Selector (~)
  • Hyphen Attribute Selector (|)

Present Attribute Selector

Present attribute selector select elements with a specified attribute

The syntax for Present Attribute Selector is:


selector[attribute] {
property: value;
}

Example 0f Present attribute selector:


<a href="#" target="_blank">Code everyday</a>

Styling the above ⬆️ Html code:


a[target] {
color: orange;
font-size: 20px;
}

The CSS styles above ⬆️ will work on any <a> element with a "target" attribute.

Styles will not apply to all other a elements that don't have a target attribute.

Equals Attribute Selector

Equals attribute selectors select elements with a specified attribute and value.

The equals (=) character represents Equals attribute selectors.

The syntax for Equals Attribute Selector is:


selector[attribute="value"] {
property: value;
}

Example 0f Equals attribute selector:


<a href="www.codecademy.com" target="_blank">Code everyday</a>

Styling the above ⬆️ Html code:


a[href="www.codecademy.com"] {
color: orange;
font-size: 20px;
}

The example above ⬆️ will find any <a>' element with a 'href' attribute set to "www.codecademy.com" and apply the CSS styles to it.

Begins With Attribute Selector

Begins with selector select elements whose attribute value begins with a specific value.

You don't have to write down the whole word of the value you specify when using Begins with selector.

The circumflex accent (^) character represents Begins with selector.

The syntax for Begins with selector is:


selector[attribute^="value"] {
property: value;
}

Example 0f Begins with attribute selector:


<a href="https://www.codecademy.com" target="_blank">Code everyday</a>

Styling the above ⬆️ Html code:


a[href^="https://"] {
color: orange;
font-size: 20px;
}

The example above ⬆️ will find any <a>' element with a href attribute that starts with "https://" and apply the CSS styles to it.

Ends With Attribute Selector

Ends with selector select elements whose attribute value ends with a specific value.

You don't have to write down the whole word of the value you specify when using Ends with selector.

Ends with selector is the opposite of the begins with selector.

The dollar sign ($) character represents Ends with selector

The syntax for Ends with selector is:


selector[attribute$="value"] {
property: value;
}

Example 0f Ends with attribute selector:


<a href="https://www.codecademy.com/docs/menu.pdf">Code documentation</a>

Styling the above ⬆️ Html code:


a[href$=".pdf"] {
color: orange;
font-size: 20px;
}

The example above ⬆️ will find any <a>' element with a ''href'' attribute that ends with ".pdf" and apply the CSS styles to it.

Attribute spaced Selector

Attribute spaced Selector is also called white space attribute selector.

It matches any element whose attribute value is a list of space-separated values. One of the values used will be equal to any of the values in the space-separated values.

By space-seperated values, I mean attribute values like class="fun coding"

The tilde (~) character represents the attribute spaced selector.

The syntax for Attribute spaced selector is:


selector[attribute~="value"] {
property: value;
}

Example 0f Attribute spaced selector:


<a href="#" rel="tag nofollow">Code documentation</a>

Styling the above ⬆️ Html code:


a[rel~="tag"] {
color: orange;
font-size: 20px;
}

The example above ⬆️ will find any <a>' element with a ''rel'' attribute with a value of "tag" and apply the CSS styles to it.

Contains Attribute Selector

Contains attribute selector select elements whose attribute value contains a specified value.

The asterisk (*) character represents Contains Attribute selector

The syntax for Contains Attribute selector is:


selector[attribute*="value"] {
property: value;
}

Example 0f Contains Attribute selector:


<a href="/signin.com">Code documentation</a>

Styling the above ⬆️ Html code:

a[href*="signin"] {
color: orange;
font-size: 20px;
}

The CSS styles will work on any <a> element with a "href" attribute that contains a value of "signin".

Hyphen Attribute Selector

Hyphen attribute-selector select elements with the specified attribute starting with the specified value.

It selects all elements whose attribute has a hyphen-seperated list of values.

The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text"!

The vertical line (|) character represents Hyphen Attribute Selector

The syntax for Hyphen Attribute Selector is:


selector[attribute|="value"] {
property: value;
}

Example 0f Hyphen Attribute selector:


<a href="#" lang="en-US">Code documentation</a>

Styling the above ⬆️ Html code:


a[lang|="en"] {
color: orange;
font-size: 20px;
}

The CSS styles will work on any <a> element with a "lang" attribute that contains a value of "en".

It matches the elements with the lang attribute that has the values en en-US en-GB and so on but not US-en, GB-en.

PSEUDO SELECTORS

There are two types of pseudo-selectors:

  • Pseudo Class Selectors.
  • Pseudo Element Selectors.

PSEUDO CLASS SELECTORS

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

  • style an element when a user mouses over it.
  • style visited and unvisited links.
  • style an element when it focus. w3schools

Pseudo-class names are not case-sensitive.

:Hover is the same as :hover. I will advise you always use small letters when writing selectors.

The colon (:) character represents Pseudo class selectors.

The syntax for Pseudo class selector is:


selector:pseudo-class {
property: value;
}

There are 3 main types of Pseudo-class selectors:

  • User Action Pseudo-classes.
  • link Pseudo-classes.
  • Structural And Positional Pseudo-classes.

USER ACTION PSEUDO-CLASSES

User Action Pseudo-classes works when the user interacts with your web page.

The most used User Action Pseudo-classes are:

  • :hover
  • :active
  • :focus

:hover

:hover works when the user moves their cursor over an element but does not select it.

The syntax for :hover selector is:


selector:hover {
property: value;
}

%[https://codepen.io/cesscode/pen/QWdaZYw]

In the example above, the color of the link will change to red when you hover over the link.

:Active

The :active selector is used to select and style the active link.

A link becomes active when you click on it. :active selector can be used on all elements, not only links.

The syntax for :active selector is:


selector:active {
property: value;
}

:focus

The :focus selects an element that is being focused on by the user. "focused on by the user" means it accepts keyboard or any other user input.

It works on user input elements used in forms and is triggered as soon as the user clicks on it.

The syntax for :focus selector is:


selector:focus {
property: value;
}

%[https://codepen.io/cesscode/pen/OJWzBWB]

The background color of the input field when focused changes to yellow in the example above ⬆️.

link Pseudo-classes

There are two link pseudoclasses:

  • :link
  • :visited

:link

Link Pseudo class selector selects a link that the user has not visited before.

The syntax for link selector is:


selector:link {
property: value;
}

:visited

:visited selects a link that the user has clicked on.

Use them to control the colors of the links and also whether they are to appear underlined or not.

The syntax for :visited selector is:


:visited {
property: value;
}

:visited can be overridden by a link pseudo-class with equal specificity.

If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.

Think of specificity as a score/rank that determines which style declarations are ultimately applied to an element. W3schools

To make link pseudo-class work, It is advisable to use the LVHA rule in the exact order to style them

LVHA stands for:

  • a:link
  • a:visited
  • a:hover
  • a:active
  • a:focus

%[https://codepen.io/cesscode/pen/zYErbKL]

Structural And Positional Pseudo-classes.

The most common structural and positional pseudo-classes you will likely come across are the:

  • :first-child
  • :last-child
  • :Only-child

:first-child

Applies style to the first child of the element.

The syntax for :first-child selector is:


:first-child {
property: value;
}

last-child

Applies style to an element if is the last child within its parent.

The syntax for :last-child selector is:


:last-child {
property: value;
}

%[https://codepen.io/cesscode/pen/NWaNqVx]

In the above example:

  • li:first-child selects line 1 cause is the first list item within the list.

  • li:last-child selects line 4 cause is the last item within the list.

:Only-child

Applies style to an element if is the only element within a parent.

The syntax for :only-child selector is:


:only-child {
property: value;
}

Example


<ul>
<li>The first child will be red</li>
</ul

Styling the above ⬆️ Html code:


li:only-child {
background-color: red;
color: white;
padding: .7em;
}

The above ⬆️ CSS styles will apply background-color: red; to the <li> element cause is the only child.

PSEUDO ELEMENTS

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s) MDN

The double colon (::) represents pseudo-element selectors.

The syntax for Pseudo element selector is:


selector::pseudo-element {
property: value;
}

Textual Pseudo-elements

The textual pseudo-elements consist of the:

  • ::first-letter pseudo-element
  • :first-line pseudo-element

::first-letter pseudo-element

::first-letter applies the style to the first letter of the element

The syntax for ::first-letter Pseudo element selector is:


selector::first-letter {
property: value;
}

::first-line pseudo-element

::first-line applies the style to the first line of the element

The syntax for ::first-line Pseudo element selector is:


selector::first-line {
property: value;
}

Both the ::first-line and the ::first-letter pseudo-element work only for block elements

%[https://codepen.io/cesscode/pen/qBPZObQ]

Generated Content Pseudo-elements

The generated pseudo-element consist of the:

  • ::before pseudo-element
  • ::after pseudo-element

::before pseudo-element

::before adds content before the HTML element.

The syntax for ::before Pseudo element selector is:


selector::before {
property: value;
}

::after pseudo-element

::after adds content after the HTML element.

The syntax for ::after Pseudo element selector is:


selector::first-line {
property: value;
}

When using the ::after and ::before pseudo-elements you must use the content property to make your styles visible.

%[https://codepen.io/cesscode/pen/mdBPeMJ]

In the example above ⬆️, I added ' to before and after the <p> element. You can also add images using the content: URL("image_link.jpg")

Difference between pseudo-class and pseudo-element

The two main differences between a pseudo-class and pseudo-element are:

1.
Pseudo-elements are preceded with two colons :: instead of one, although these days modern browsers are more forgiving and support both : and double :: colons for the pseudo-elements. It is best practice to use double colons ::

2.
Pseudo-classes are all about the state, states like a visited link, a focused input field, an image that is being hovered upon, e.tc. While pseudo-elements are used to style sections or a particular part of an element, things like the first letter in a word, first-line e.tc.

Check out some of these resources for a more in-depth look into CSS pseudo-classes and pseudo-elements:

CONCLUSION

I hope you enjoyed this post and that it helps you on your way to becoming a better front-end developer.

Start experimenting with the various CSS selectors to see how you can improve your CSS code.

If you found this article helpful, please like and share it 💙.

That's all for today! 😁 You reached the end of the article 😍.

Top comments (0)

Read next

tutortacademy profile image

Can Web Development Make You Rich?

Tutort Academy -

shieldstring profile image

Understanding Exports and Imports in JavaScript

Agbo, Daniel Onuoha -

gravgor profile image

🌍 Landmark API: Real-time Data for Landmarks, Tourism, and Travel Tech

Marceli Borowczak -

madsstoumann profile image

Designing Better Tables: Using Popovers for Extra Data

Mads Stoumann -