Home/ Questions/Q 6735243
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T10:59:10+00:00

I have the following HTML in a page feature: <div id=feature-detail> <div class=da1 d-active>

  • 0

I have the following HTML in a page feature:

<div id="feature-detail">
    <div class="da1 d-active">
        <h1><span>Detail 1</span></h1>
        <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></p>
        <a href="#"><span>Show how</span></a>       
    </div>
</div>

I then have further down the page:

<div id="page-submain" class="centred">
    <div id="left-widget" class="widget">
        <h1><span>Title</span></h1>
        <p><span>Lorem ipsum dolor sit amet.</span></p>
        <a href="#"><span>Read More</span></a>
    </div>
</div>

NOTE: Neither of the above parent <div> elements are nested within each other. Both have a parent of <body>.

When I run some tests on the CSS structure, I have noticed that this style rule:

.widget p,a,h2 {
    margin:3px 5px 3px 5px;
    padding:0;
}

Is influencing the <a> in #feature-detail. Why is this doing that when I’ve explicitly applied the style to the class ‘widget’?

Not making a huge amount of sense to me at the moment, but it seems that IE, FF, Chrome and Opera are interpretting it exactly the same. Am I missing something here?

Thanks for taking a look!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What you’ve written is equivalent to:

    .widget p {
    margin:3px 5px 3px 5px;
    padding:0;
}
a {
    margin:3px 5px 3px 5px;
    padding:0;
}
h2 {
    margin:3px 5px 3px 5px;
    padding:0;
}

    What you want is:

    .widget p, .widget a, .widget h2 {
    margin:3px 5px 3px 5px;
    padding:0;
}
    • 0