How to apply styles to neighboring elements in a list


Tags: html,css,css3

Problem :

Can I accomplish this scenario using only CSS?

I have an unordered list of elements of arbitrary length that lay out into a grid of four elements across

**** **** **** ****
*  * *  * *  * *  *
**** **** **** ****

**** **** ****
*  * *  * *  *
**** **** ****

When a user mouses over an element, then some additional content will dropdown below the element and push the rows below it down.

**** **** ---- ****
*  * *  * |^ | *  *
**** **** ---- ****
-------------------
| Content is here |
-------------------
**** **** ****
*  * *  * *  *
**** **** ****

The main thing is that the dropdown needs to fill up the parent container width-wise. I've done this using position: absolute and having the <ul> element be position: relative.

I was thinking that maybe something with an nth-child might work to essentially set the bottom margin for the neighbors and push the lower elements down, but I'm not sure how to accomplish this.

I'm trying to avoid resorting to doing this in Javascript if possible.

Edit

Here's a fiddle of what I've got so far: http://jsfiddle.net/pYw34/



Solution :

I hope this is what you want.

updated fiddle

Not an easy rule, however:

.about__list__item:nth-child(4n):hover:after,
.about__list__item:hover + .about__list__item:nth-child(4n):after,
.about__list__item:hover + .about__list__item + .about__list__item:nth-child(4n):after,
.about__list__item:hover + .about__list__item + .about__list__item + .about__list__item:nth-child(4n):after
{
    content: '';
    float: left;
    display: block;
    width: 100px;
    height: 90px;
    background-color: yellow;
} 

I made the element yellow to track it, of course that element should be invisible.


    CSS Howto..

    How to make this breed of resizable vertical divider for two divs?

    How can I make my
    fit vertically into a parent div?

    How to position children with respect to parent in CSS?

    CSS - EM Values Inconsistent, How To Debug / Explanation

    How to float left without wrapping to next line?

    css: how to target p a img

    How to make css search form responsive

    How to make a transparent border using CSS?

    How can I count HTML elements on a printed page using CSS?

    how do I align my error message with Simple_form for Ruby on Rails?

    How do we write a CSS “block-level-style” within an inline style attribute tag?

    How to get CSS background property to work with toggleClass() in jQuery?

    How to fix image urls when processing css files with Gulp?

    How to include library files (css/js) in angular-fullstack based app

    How to stretch background image of a table cell with CSS?

    How to hide element label by element id in CSS?

    How to remove an overhanging div

    How to bring parent div front?

    How to use @Media queries

    How to make the CSS Dropdown same size as it's parent

    How to convert an image for a website menu button into CSS

    How to stick to bottom on layout by using CSS?

    How to enforce input text to take 100% width of its parent

    How does one right-justify bootstrap pills with css

    How Do I set this PHP printed HTML form to stay within

    tags?

    How to add media='screen' in css using cakePHP?

    How to change CSS for a specific page in wordpress?

    How to make input+label in a form appear one by one?

    How to force elements to be in middle?

    How do I have a div go around another div?