CSS not being applied to Pug conditional elements

Question

I am currently working with Pug, node.js and express to write a web application.

I have come across some problems applying CSS styling to elements of my code that are inside Pug conditionals.

For example, if my Pug has:

div(id='outside')
  if authorised
    h3(id='unauthorised') Sorry, you are unauthorised
  else
    h3(id='authorised') Welcome!

My CSS is then:

#outside {
  width: 100px;
  height: 10px;
  background-color: red;
}

#unauthorised {
  color: red;
}

#authorised {
  color: green;
}

The div#outside will pick up the CSS but both h3#authorised and h3#unauthorised elements will not. This goes for any elements I choose.

I couldn't seem to find an issue like this on the Pug Github page, nor could I find much help when trying to research, so I'm assuming I'm doing something wrong.

Any thoughts?

---

EDIT:

For clarification, the code I am actually using is:

header.pug

doctype html
html
  head
    title= title
    script(src='js/action-button.js')
    script(src='js/form.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js')
    style
      include ../../public/css/main.css

  body
    div#test

    if isAdmin
      div(id='action-items' onmouseover='expandHoverAsAdmin()' onmouseout='closeHoverAsAdmin()')
        button(type='button' class='admin-button action' onclick='openForm();') Add role
        button(type='button' class='admin-button action' onclick='openForm();') Add user
        button(type='button' id='action-button' class='action' onclick='openForm();') +
    else
      button(type='button' id='action-button' class='' onclick='openForm();' onmouseover='expandHover()' onmouseout='closeHover()') +

main.css

div#test {
  width: 100px;
  height: 20px;
  background-color: red;
}

div#action-items {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  bottom: 20px;
  right: 20px;
  z-index: 1;
  position: fixed;
}

.action {
  border-width: 0;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 20px;
  right: 20px;
  z-index: 1;
  width: 115px;
  height: 55px;
  border-radius: 30px; /* make circular maybe? */
  background-color: rgba(255,0,0,0.5);
  color: white;
  box-shadow: rgba(2,2,2,0.5) 2px 2px 2px 0px;
}

button:focus {
  outline: none;
}

button:hover {
  cursor: pointer;
}

---

EDIT #2:

I can see that the issue is now not the fact that the CSS isn't being applied to the conditional elements, but more that my CSS file isn't saving some of my changes.

I've just tested with the above once more where it previously worked. When I open my main.css file locally, I see:

#one-element {
  /* some styling */
}

#outside {
  width: 100px;
  height: 10px;
  background-color: red;
}

#unauthorised {
  color: red;
}

#authorised {
  color: green;
}

#some-other-element {
  /* some styling */
}

But viewing this CSS through dev tools in Chrome, I see:

#one-element {
  /* some styling */
}

#some-other-element {
  /* some styling */
}

I'm using Atom to edit my files. And I'm definitely saving my CSS, so that shouldn't be the problem.

Answer 1

Solved. I've been updating a file with an identical name in a different location that my pug was not pointing to.