Is it possible to apply same style to element 1 and element 2, without calling out the style in element 1?

Question

Element 1 is .notch

Element 2 is #fullbg

Element 1 must always come before Element 2. I would like to apply Element 2's bg-color to Element 1 and Element 2.

How do I make the first <div class="notch">have a yellow bg (#fullbg), without applying any specific style (class/id) to <div class="notch">?

I'm thinking this could be done with :nth-of-type() selector...? Eventually, I will have several "notches", with <div id="fullbg3">, <div id="fullbg4">, etc.

Check codepen example - I want first notch to be yellow (like fullbg), and second notch to be red (like fullbg2), without giving any notch their own special class.

Currently, the first notch is red. It should be yellow.

http://codepen.io/Goatsy/pen/GqJGxb

HTML

<p>stuff</p>
<div class="notch">this should be YELLOW</div>

<p>stuff</p>
<div id="fullbg">this should be YELLOW</div>

<p>stuff</p>
<div class="notch">this should be RED</div>

<p>stuff</p>
<div id="fullbg2">this should be RED</div>

CSS

.notch,
#fullbg {
    background: yellow;
}

.notch,
#fullbg2 {
    background: red;
}

Here is, more specifically what I'm trying to achieve: the bgcolor and small block color should match. codepen.io/Goatsy/pen/rLVrJo

Here is, more specifically what I'm trying to achieve: the bgcolor and small block color should match. http://codepen.io/Goatsy/pen/rLVrJo — Goatsy, Jun 04 '16 at 22:52

score 1 · Answer 1 · answered Jun 04 '16 at 20:19

1

The ~ (selects successors) partly solves the problem, though it can be not very flexible sometimes (i.e. you have to right that for every new "notch").

.notch,#fullbg{
  background:yellow;
}
#fullbg~.notch,#fullbg2{
  background:red;
}
#fullbg2~.notch,#fullbg3{
  background:green;
}

<p>stuff</p>
<div class="notch">this should be YELLOW</div>

<p>stuff</p>
<div id="fullbg">this should be YELLOW</div>

<p>stuff</p>
<div class="notch">this should be RED</div>

<p>stuff</p>
<div id="fullbg2">this should be RED</div>

<p>stuff</p>
<div class="notch">this should be GREEN</div>

<p>stuff</p>
<div id="fullbg3">this should be GREEN</div>

answered Jun 04 '16 at 20:19

nicael

18,550
13
57
90

I applied your styles to my actual code. The yellow is applied. But add a "2" then "3" to
, and the small block stays yellow. I need it to match bgcolor. http://codepen.io/Goatsy/pen/MewBbG – Goatsy Jun 04 '16 at 21:48
Try changing this to say:
------ the yellow is still there, but should now change to be red (to match red bg). http://codepen.io/Goatsy/pen/MewBbG
– Goatsy Jun 04 '16 at 21:49
I have assumed that you have the sequence, you haven't told that it should work separately. I have misunderstood you, sorry, @Goatsy. – nicael Jun 04 '16 at 22:05
no, don't be sorry - i'm sorry i wasn't specific enough... :) can you help me solve this without having to write a new notch? it has to be same notch every time. – Goatsy Jun 04 '16 at 22:08
@Goatsy Then [this](http://stackoverflow.com/q/1817792) may help you, appears that it is essentially "previous sibling selector" problem. – nicael Jun 04 '16 at 22:09
No, there is no "previous sibling selector", but using `flex` you can make it work as if there were – Asons Jun 04 '16 at 22:26
@LGSon Ive tried using flex before, but it interfered with other parts of my design. Thanks. – Goatsy Jun 04 '16 at 22:51

Asons · Answer 2 · 2016-06-05T07:47:42.560

Updated based on comment/codepen sample

Here is a start

/* notch nav styles */
.notch-nav {
    overflow: hidden;
    background: #fff;
    margin: 0;
    list-style: none
}
.notch-nav li {
    float: right;
    margin-top: 33px;
    /* adjust this line to push entire notch nav down and away from minilinks */    
    margin-right: -15px;
}
.notch-nav a {
    display: block;
    /* padding:50px 0 20px 30px; */    
    margin-left: 30px;
    color: #cca134;
    text-decoration: none;
    font-size: 18px;
    padding-bottom: 25px;
}
.notch-nav a:hover {
    text-decoration: none;
    color: @295pms;
}

.notch-nav .current .dropdown:hover .dropbtn:before,
.notch-nav .current .dropdown:hover .dropbtn:after {
    display: none
}
.notch-nav .current .dropdown-content a:before,
.notch-nav .current .dropdown-content a:after {
    display: none
}
.notch-nav .current a {
    position: relative;
    text-decoration: none;
    z-index: 5;
}
.notch-nav .current a:before,
.notch-nav .current a:after {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -15px;
}
/* make fullwidth-header 100% */
.fullwidth-header {
    display: none;
    width: 100%;
    height: 230px;
}
.fullwidth-header-block {
    display: block;
    background: @white;
    padding: 30px;
    margin-top: 53px;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.fullwidth-header-block p {
    margin-top: 0;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
}

/*  current classes  */
.curr1 li:nth-child(1),
.curr1 ~ div:nth-of-type(1) {
  background:blue;
  display: block;
}

.curr2 li:nth-child(2),
.curr2 ~ div:nth-of-type(2) {
  background:black;
  display: block;
}

.curr3 li:nth-child(3),
.curr3 ~ div:nth-of-type(3) {
  background:pink;
  display: block;
}

.curr4 li:nth-child(4),
.curr4 ~ div:nth-of-type(4) {
  background:green;
  display: block;
}

<ul class="nav notch-nav curr4">
  <li>
    <div class="dropdown">
      <a class="dropbtn" href="/utilities/about-rpu">About</a>
    </div>
  </li>
  <li>
    <div class="dropdown">
      <a class="dropbtn" href="/utilities/?q=contractors">Contractors</a>
    </div>
  </li>
  <li>
    <div class="dropdown">
      <a class="dropbtn" href="/utilities/?q=businesses">Businesses</a>
    </div>
  </li>
  <li>
    <div class="dropdown">
      <a class="dropbtn" href="/utilities/?q=residents">Residents</a>
    </div>
  </li>
</ul>


<div class="fullwidth-header">
  About
</div>

<div class="fullwidth-header">
  Contractors
</div>

<div class="fullwidth-header">
  Businesses
</div>

<div class="fullwidth-header">
  Residents
</div>

The "notch" is not present in your code, and i am unable to wrap them. See this codepen to get a better idea of what I'm trying to achieve: http://codepen.io/Goatsy/pen/rLVrJo (small block and bg-color should match) — Goatsy, Jun 04 '16 at 23:17
@Goatsy Updated my answer with one way to go ... also check out answers given in this question of mine, for optional ways to trigger groups of elements: http://stackoverflow.com/questions/36162805/toggle-radio-input-using-css-only — Asons, Jun 05 '16 at 07:48
@Goatsy If my answer solved it, please accept, or else let me know what's missing. — Asons, Jun 05 '16 at 19:58
Sorry - I have not yet had a chance to implement this. Let me get back to you in a few days. — Goatsy, Jun 09 '16 at 05:34

Is it possible to apply same style to element 1 and element 2, without calling out the style in element 1?

2 Answers2