How can I avoid styling the footer?

Question

I have styles for the site but don't want them to apply to the footer. How can I achieve this?

HTML CSS Selector

@media(max-width: 500px){
#mobileview{
width:100%;
height:211px;
}

p {
    text-align: left;
    text-align: justify;
    font-size:70%;
}
br {
    display: none;
}
h1 {
    text-align: left;
    font-size:190%;

}
a {
    text-align: left;

        float:left;
}
a.animation {
    text-align: center;
        font-size:9px;
        float:center;

}
}

This is one of the code for my mobile view.

This is my code when calling footer

<div class="row">
  <div class="container2">
   XXX Content
  </div>
</div>
<?php echo $footer; ?>

How do i exclude these style for footer ? As it was messing with my footer

Show the code that assigns the `$footer` variable. Most probably it must be a *php include*. If so, check that section which has been included and assign those CSS variables there. — Gosi, Feb 17 '20 at 02:34
Just add id attribute to the div you wanted for applying css style .. — David Japan, Feb 17 '20 at 02:36
@DavidJapan any idea how to do so ? i tried to do it , but it failed ( nothing changed ) — greenboxgoolu, Feb 17 '20 at 02:40
I'm surprised that you're already using media queries, yet haven't even learned the basics of HTML/CSS. What you're searching for/experiencing is known as [Specificity](https://www.w3schools.com/css/css_specificity.asp). — AlexG, Feb 18 '20 at 15:54

score 3 · Accepted Answer · answered Feb 18 '20 at 15:48

You cannot exclude styles for when elements match that reside in a specific context (blacklisting is not possible because there is no parent selector in CSS)

What you can go for, is a whitelisting approach, namely give your selectors context:

main p {
  color: red;
}

<main>
  <p>I'm red</p>
</main>
<footer>
  <p>I'm not red</p>
</footer>

In this example, instead of doing

p { color: red; }

notice how I define the context that says only p inside main shall be affected by this rule.

main p { color: red; }

How can I avoid styling the footer?

1 Answers1