Can I select an element using CSS only if it is visually below another element?

Question

I have the following Layout:

<!doctype html>
<html lang="en">
<head>
    <style>
        html{
            font-family: "Trebuchet MS", Helvetica, sans-serif;
            color: white;
        }
        .outer{
            /*Maybe something here?*/
        }

        .inner_1{
            background-color: aquamarine;
            display: inline-block;
            width: 400px; /*(For testing)*/
        }

        .inner_2{
            background-color: mediumaquamarine;
            display: inline-block;
            width: 400px; /*For testing*/
        }

        /*or Something like this?*/
        /*inner_1:below{
            background-color:red;
        }*/

    </style>
</head>
<body>
<div class="outer">
    <div class="inner_1">
        <p>This is inner_1. Some Content goes here</p>
    </div>
    <div class="inner_2">
        <p>This should be red if it is <b>below</b> inner_1</p>
    </div>
</div>


</body>
</html>

Is there a pure CSS way to select the second div only if it is below the first div? (Which is the case when the viewport-size drops below 800-ish px)

I want to apply color (or any CSS attribute) to the second div only if its below the first div.

I know I could use media-queries to put one div below the other and aplly styles to it but I don't know how much content will be in the div's so thats not an option.

Any ideas? please let me know.

EDIT I'm talking about visual representation.

What do you mean by "below" in a visual structure or in DOM? — timo, Aug 18 '15 at 12:57
How would I query for a line-break? I don't know at what width the line-break will happen. — Claas M., Aug 18 '15 at 13:07

timo · Answer 1 · 2015-08-18T13:03:21.570

1

Yes you can. Use the + selector in CSS

.inner_1 + .inner_2 p {
    border: solid red 1px;
}

See this demo

The element+element selector is used to select elements that is placed immediately after (not inside) the first specified element.

http://www.w3schools.com/cssref/sel_element_pluss.asp

edited Aug 18 '15 at 13:03

answered Aug 18 '15 at 12:58

timo

2,119
1
24
40

1

I'm almost 100% sure the question is not about DOM structure, but about visual representation. – connexo Aug 18 '15 at 13:01
I am indeed talking about visual representation. – Claas M. Aug 18 '15 at 13:06
@ClaasM. Then no, you can't do this without media queries. – timo Aug 18 '15 at 13:15
How would I query for something like this if I don't know he width of the two div's? – Claas M. Aug 18 '15 at 13:22
@ClaasM. Missed the part about the content. Javascript is definitely not an option? – timo Aug 18 '15 at 13:45
I am now using javascript. Thanks anyways :) – Claas M. Aug 19 '15 at 09:50

score 0 · Answer 2 · answered Aug 18 '15 at 13:17

you can do it easily using :nth-child() selector

.outer div:nth-child(2){background:red !important;}

<!doctype html>
<html lang="en">
<head>
    <style>
        html{
            font-family: "Trebuchet MS", Helvetica, sans-serif;
            color: white;
        }
        .outer{
            /*Maybe something here?*/
        }

        .inner_1{
            background-color: aquamarine;
            display: inline-block;
            width: 400px; /*(For testing)*/
        }

        .inner_2{
            background-color: mediumaquamarine;
            display: inline-block;
            width: 400px; /*For testing*/
        }

        /*or Something like this?*/
        .outer div:nth-child(2){background:red;}

    </style>
</head>
<body>
<div class="outer">
    <div class="inner_1">
        <p>This is inner_1. Some Content goes here</p>
    </div>
    <div class="inner_2">
        <p>This should be red if it is <b>below</b> inner_1</p>
    </div>
</div>


</body>
</html>

I'm not talking about DOM, I'm talking about visual representation. (So I'd have to detect if there was a line-break between the two inner div's) — Claas M., Aug 18 '15 at 13:21

score 0 · Answer 3 · edited May 23 '17 at 12:06

I am now using javascript. Complete solution can be found here

function GetAllElementsAt(x, y) {
    var $elements = $("body *").map(function() {
        var $this = $(this);
        var offset = $this.offset();
        var l = offset.left;
        var t = offset.top;
        var h = $this.height();
        var w = $this.width();

        var maxx = l + w;
        var maxy = t + h;

        return (y <= maxy && y >= t) && (x <= maxx && x >= l) ? $this : null;
    });

    return $elements;
}

Can I select an element using CSS only if it is visually below another element?

3 Answers3