how to remove attribute from div using css in wordpress cms

Question

I use wordpress cms for an e-commerce site, on my shop page pagination is not displayed and when I inspect element I see this

<div class="shop-loop-after clearfix" style="opacity: 1; display: none;">
<nav class="woocommerce-pagination">

in inspection when I remove display:none from style attribute it work

I also tried this on shop page but it does not work

document.getElementByClassName('shop-loop-after').removeAttr('style')

<div class="shop-loop-after clearfix" style="opacity: 1; display: none;">
<nav class="woocommerce-pagination">

I want to how to remove the display attribute using css

Answer 1

Given this HTML:

<div class="item" style="display:none"></div>

With JavaScript:

document.getElementsByClassName("item")[0].removeAttribute("style");

With CSS:

.item{
    display: inherit !important;
}

Examples:

 document.getElementsByClassName("item")[0].removeAttribute("style"); 

 .item{ width: 300px; height: 300px; border: solid gray 3px; display: inherit !important; } 

 <div class="item" style="display:none"></div>