CODEWITHSUNDEEP
htmlcsswordpress
luis montez
luis montez

Reputation: 35

<h> tag different color in different page

I'm trying to make that a h1 tag as two colors, for example in the "main page" the h1 is red, and in the "secondary page" the h1 is blue.

I'm trying to achieve this without success, I been doing this with a span but I would like to know if there is another way to do this.

this is my code structure

h1, h2, h3, h4, h5, p, li, ul, ol, a, a:hover, button { color: red; }

h1 .h1cor{
   color: blue;
}

Upvotes: 0

Views: 717

Answers (3)

Nazar Becks
Nazar Becks

Reputation: 177

every page throws a unique class or id in the page, take the class or id of the page as your reference to style h1 tag; for example;

<body class="page-class">

.page-class h1{
    color:blue;
 }

Upvotes: 2

Rehan
Rehan

Reputation: 4013

First get the page name you are currently in by using this

var url = window.location.href
 var getLink = url.split("/").pop();

Then set the color according to the name of the page

if(getLink == 'mainPage'){
  $('h1').css("color","red");
}else if(getLink == 'secondary page'){
  $('h1').css("color","yellow");
}

Upvotes: 1

Ptrckk
Ptrckk

Reputation: 66

You can do this with an ID like this: 

#secundarypage h1{
color:red;
}

#mainpage h1{
color:blue;
}
<div id="mainpage">
  <h1>Heading for mainpage</h1>
</div>

<div id="secundarypage">
  <h1>Heading for secundary page</h1>
</div>

Upvotes: 1

Related Questions