'How do I use CSS to style a specific h5 heading when I have more than one h5 headings

In my code, there are a couple of h5 headings and I want to style only one of them without changing the others. I tried using the following code in my CSS file:

h5{
    color:blue;
    text-align:center;
}

Apparently, this changes every h5 heading I have in my HTML code which is not what I wanted. How do I fix this?

htmlcss


Solution 1:[1]

You could try to have different id's for each header. Like the example below

<h5 id="header1"></h5>

<h5 id="header2"></h5>

<h5 id="header3"></h5>

<h5 id="header4"></h5>

Then in css you can control each element with the id.

#header1{
    color:red;
}

#header2{
    color:blue;
}

#header3{
    color:white;
}

#header4{
    color:black;
}

Please note that ids cannot start with a number

Solution 2:[2]

You can set id or class attribute to each element.

look this article: https://www.w3schools.com/css/css_selectors.asp

Solution 3:[3]

you should have this h5 inside another HTML element.

you can use nth:child() css selector.

try this:

https://www.w3schools.com/cssref/sel_nth-child.asp

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Someone
Solution 2 Iman
Solution 3

Related Questions