Goatsy Goatsy - 1 year ago 43
CSS Question

How can I apply same style from element that changes in HTML to one that doesn't change in HTML?

I need this HTML to change from

, then
,4, 5, 6, and so on.

<div class="fullwidth-header">
<div class="container custom-container">
<div class="fullwidth-header-block">
<p>Manage your home utility account.</p>

Here is the small notch inside the top, white navigation.

.notch-nav .current a:before, .fullwidth-header {
background: blue;

It's currently green. I need it to be blue (essentially, it should have the same exact background as fullwidth-header, 2, 3, 4, etc, depending on which full-width header is in the HTML.


If you check the pen, you'll see that when changing the HTML from fullwidth-header to fullwidth-header2, the backgrounds don't match.

How do I achieve the "matching" bg and small box without having to change anything else in the HTML besides fullwidth-header#?

I'm looking for any solution, CSS or jQuery. Preferably, CSS.

Answer Source

In your CSS, you have:

.notch-nav .current a:before, .fullwidth-header4 {
    background: green;

which is the same as writing:

.notch-nav .current a:before {
    background: green;

.fullwidth-header4 {
    background: green;

In other words, the two style declarations aren't actually linked in any way. That's why the .notch-nav a thing will always be the last color you declare it in CSS (keeps overriding previous ones).


You have two main options at this point:

1) Change the color via Javascript, (writing vanilla JS here but it's easily translated into JQuery) i.e.:

document.querySelector('.notch-nav .curent a:before').style.background = document.querySelector('.fullwidth-header').style.background

2) Re-structure your HTML so that the .notch-nav is nested INSIDE of an identifying parent, i.e:

<div class="fullwidth-header header2">
  <div class="notch-nav"></div>

Because then you could write CSS like this:

.header2 .notch-nav { /* something */ }
.header3 .notch-nav { /* something else */ }
... etc.

I would personally recommend restructuring the HTML slightly (option 2) instead of adding a script to do this.