CSS Child selector - manipulating same div class within two different divs

Question

My aim is to control the position and margin attributes via css of my div class element "textwidget" which appears on different positions within my site.

This is my structure:

<header class="site-header">
<hgroup class="full-container">

<div id="header-sidebar" >
    <aside id="text-2" class="widget widget_text">          
        <div class="textwidget">    ...     </div>
    </aside>

</div>

</hgroup>
</header>


<footer class="site-footer">

<div id="footer-widgets" class="full-container">
    <aside id="text-5" class="widget widget_text">
        <div class="textwidget">     ....      </div>
    </aside>
</div>

</footer>

And this is, what i tried in CSS, but what didn't worked out:

.textwidget{
position: absolute;
right: 0;
margin-top: 30px;
text-align: right;
}

footer > .textwidget{
position: absolute !important;
left: 0 !important;
text-align: left !important;
}

Answer 1

footer > .textwidget{

targets only elements of class 'textwidget' that are direct descendents of footer, ie:

<footer class="site-footer">
    <div class="textwidget">
        This div will be targeted
    </div>
</footer>

Remove the > and it will target any elements of class 'textwidget' within the footer.

Selector you want: footer .textwidget

---

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Answer 2

.textwidget is the great-grandchild of the footer , not the child.

Use a descendant combinator (a space) instead of a child combinator (a greater than sign).

footer .textwidget {
  position: absolute;
  left: 0;
  text-align: left;
}

You can get rid of the !important s too. They are a horrible sledgehammer at the best of times, and aren't needed here before footer .textwidget is more specific than .textwidget .

Answer 3

in the example you gave the div with a class of .textwidget is not a direct child of the footer try:

footer aside > .textwidget{
position: absolute !important;
left: 0 !important;
text-align: left !important;
}