CODEWITHSUNDEEP
pythoncssflask
CacheMoneyPlaya
CacheMoneyPlaya

Reputation: 143

How to stop child templates inheriting parent css classes in Flask

I have a parent template that contains my nav bar and a couple of other things:

<!DOCTYPE html>

<head>
    <title>JVB</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>

<body>
    <div>
        <ul>
            <li><b><a href="{{ url_for('linkedin') }}" >CacheMoneyPlaya</a></b></li>
            <li><a class="{{'current_tab' if activePage == 'who' }}" href=" {{ url_for('who')}} ">Who</a></li>
            <li><a class="{{'current_tab' if activePage == 'what' }}" href=" {{ url_for('what')}} ">What</a></li>
            <li><a class="{{'current_tab' if activePage == 'work' }}" href=" {{ url_for('work')}} ">Work</a></li>
        </ul>
    </div>
    </body>
    <div class="content" >
    {% block content %}

    {% endblock %}
    </div>
</html>

It also has an associated css file for styling the nav bar which is constructed from an unordered list, in my css file all li's are styled in a specific way. When a use clicks on a certain tab in the nav bar it loads the section into the main parent file using {% block content %}, however the child templates also inherit the css from the parent and if I want to use some li tags within the child they will by default take the classes within the parent (which obviously makes total sense).

{% extends "layout.html" %}
{% block content %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/about.css') }}">
    <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<div>
    <div class="opening" >
        <p class="intro" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat,
             sem a lacinia ultricies, quam nibh convallis lorem, sed efficitur nisl nibh et nisi.
              Mauris placerat molestie massa, et fermentum orci scelerisque eu. Morbi ligula est, 
              finibus nec euismod non, auctor mattis orci. Praesent convallis rutrum augue,
               non euismod nisi venenatis eget. 
        </p>
    </div>
</div>


{% endblock content %}

How would I go about getting the child template to not inherit the css classes of the parent so I can style my li's to my liking within the child?

Upvotes: 1

Views: 413

Answers (1)

Shamsheer
Shamsheer

Reputation: 744

Use custom CSS for the child template on whichever element you want the change to be reflected by assigning it a specific class.

Upvotes: 0

Related Questions