CODEWITHSUNDEEP
htmlcss
Fresh
Fresh

Reputation: 51

How to target site footer on individual page?

Html:

<footer id="colophon" 
class="site-footer footer 
bg-dark" role="contentinfo">
<div class="container 
footer-inner">
<div class="row">
<div class="footer-widget- 
area"><div class="col-md-3 
col-sm-6 footer-widget" 
role="complementary">
<div id="text-4" 
class="widget widget_text">          
<div class="textwidget"><p>. 
<a href="http://4309.co.uk/
contact/">Contact</a></p>
</div>
</div></div>

Tried css:

.page-id-3748>.site-
footer{position:relative 
!important;top: 100px! 
important;}

Trying to target footer on one page only. I know the selector is site-footer but I'm trying to do it with specificity.

Upvotes: 1

Views: 829

Answers (2)

bron
bron

Reputation: 1558

Use !important only if nothing else will work.

Because an id has an higher priority you can use

.page-id-3748 #colophon { }

or combining 2 class selectors will also give you more priority.

.page-id-3748 .site-footer.footer { }

or use tags to give it more priority

.page-id-3748 footer.site-footer { }

If you have used the !important elsewhere on site-footer, then nothing here will work. Also if you have overruled the .site-footer on aother place in your styling this will not wordk.

Upvotes: 0

Creative Div
Creative Div

Reputation: 443

Try to remove the ">" sign inside your CSS.

.page-id-3748 .site-footer {
     position:relative !important;
     top: 100px! important;
 }

Upvotes: 1

Related Questions