CODEWITHSUNDEEP
htmlcsswordpress
blau
blau

Reputation: 93

change h1 color in css based on div class with space in it

I am currently trying to change the color of a title by referencing a div's class.

So far I have tried:

.pagetitle-title.heading {
  color: purple;
}
<div class="container">
  <h1 class="pagetitle-title heading">IT•ONE Method</h1>
</div>

And even:

h1 {
  color: purple; 
}

Upvotes: 1

Views: 4298

Answers (3)

Martin
Martin

Reputation: 2414

As mentioned per my comment, it looks like a classic case of "CSS overwrite". One of the "hacks" to avoid this, is to use the CSS property !important to tell the browser which CSS rule is particularly important, and should not be overwritten.

Example: color: purple !important;

CSS applies the style in the fashion that it is loaded. So if you have 1 CSS file with x rules, and a 2nd CSS file with y rules, and they both target the same elements, then the CSS file that was loaded last will generally overwrite the styles of the one prior.

The order is known as the top-down rule, and is only overwritten by the !important property and in-line CSS. The !Importantproperty will generally overwrite any in-line CSS.

Given the information about the top-down rule, and you have the means to edit the CSS and/or choose the order of how the CSS is loaded, you can make sure that you are able to apply your own CSS rules by having them load as the last included file in your project.

Example:

<head>
<link rel="stylesheet" type="text/css" href="loadedfirst.css">
<link rel="stylesheet" type="text/css" href="loadedsecond.css">'
<link rel="stylesheet" type="text/css" href="loadedlast.css">
</head>

In case these 3 files have rules that applies to the same elements, the loadedlast.css file is the CSS that will overwrite the ones prior, except in the case of the !important property and in-line CSS. By managing the order of your CSS, you can avoid having to resort to such "hacks" as using the !important property.

Upvotes: 1

Yash009
Yash009

Reputation: 533

I would avoid adding important as much as I can. I would just go higher up the parents and try to target the div as specific as I can. Instead, I would go 

.container h1.pagetitle-title.heading {
    color: purple;
}

If that doesn't work only then I would use important.

Upvotes: 1

Florian Valois
Florian Valois

Reputation: 216

  1. Check your link "stylesheet" for your CSS
  2. Open you debug console and identify your h2 to see if CSS option are targeted
  3. Try another hexa color code

  4. Add "!important" after touy color code

    color: purple!important;

I see your code and it's correct method to modify this color so... Try my checklist first and give us your feedback.

Upvotes: 1

Related Questions