Селектор класса CSS применяется к div без указания класса?

Question

Я немного новичок в CSS и боролся с тем, почему селектор применяется к бесклассовому div.Вот мой код CSS:

.page-header p, form{
    font-family: 'Raleway', sans-serif;
    float: right;
    margin: 5px;
    padding-top: 30px;
}

А вот мой HTML-код:

    <div class="page-header">

        {% if user.is_authenticated %} 

        <form action = "{% url 'logout' %}">
          <button type="submit">Logout</button>
        </form>
        <form action = "{% url 'errandlist' %}">
          <button type="submit">View my errands</button>
        </form>
        <p>Welcome {{ user.get_username }}.</p>

        {% else %}

        <form action = "{% url 'login' %}">
          <button type="submit">Login</button>
        </form>
        <form action = "{% url 'signup' %}">
          <button type="submit">Sign up</button>
        </form>
        <p>You are not logged in.</p>

        {% endif %}

        <h1><a href="/">bingoHelper</a></h1>
    </div>

    <div>
    {% block content %}{% endblock content %}
    </div>

Первый div правильно применяет класс заголовка страницы.Проблема в том, что нижний div каким-то образом использует класс заголовка страницы, хотя класс не указан.Например, в следующем HTML-файле, который показывает содержимое блока, форма имеет плавающее право и шрифт Raleway:

{% extends "base.html" %}

{% block content %}
  <h2>Sign up</h2>
  <form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Sign up</button>
  </form>
{% endblock content %}

Любая помощь будет принята с благодарностью !!

Answer 1

Если вы хотите, чтобы ваш CSS увеличился до page-header div, укажите класс в тегах <form>.Смотрите ниже код CSS:

.page-header p, .page-header form{
    font-family: 'Raleway', sans-serif;
    float: right;
    margin: 5px;
    padding-top: 30px;
}

Answer 2

Код CSS:

.page-header p, form{
  font-family: 'Raleway', sans-serif;
  float: right;
  margin: 5px;
  padding-top: 30px;
}

применяет CSS к элементу p внутри вашего div с классом .page-header И элементами формы.

Удалить, форма из вашего css, поэтому она применяется только к элементам div с классом .page-header

ОБНОВЛЕНИЕ

Чтобы применить его ктолько форма внутри div с классом .page-header:

.page-header p, .page-header > form {
  font-family: 'Raleway', sans-serif;
  float: right;
  margin: 5px;
  padding-top: 30px;
}