Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

HTML & CSS how can I talk to divs within divs

S

somboku

New Coder
Guys I'am struggling with this for a while now. to how can i talk with a child who is on a different layer and in div of divs like:

Code: 
<body>
<div id=main>
   <div class=top>
     <div class=links>
      <div class=mama>
         Mama
       </div>
     </div> <!-- end link -->
   </div>! end top

 <div class=content>
   <div class=contentarea>
       <div class=kiddo>
           here we go
      </div>
  </div>
</div
</div>

in css all divs are positioned relative. there is a transition on the kiddo what i want to change from mama
like
.mama:hover is(".kiddo") { width:100px}

I ve tried really every thing I know. like
.links.mama:hover .contentarea > .kiddo {..}
or different stuff with ~, change classess to IDs etc...
But I cant reach kiddo.

somebody maybe take a look and show me the right direction?
thanks.
 
Sort by date Sort by votes
I think that based on your structure you can't target the kiddo div when hovering on the mama div, at least with CSS alone. The problem is that they are too far separated from each other. If you had kiddo inside of mama, you could target it with CSS. Possibly if you also had kiddo next to mama at the same level, as a sibling, you could also target with CSS. However, the way you have your code kiddo and mama are isolated from each other in a way you cannot tie them together with CSS.

Your best course of action is to either restructure your HTML, or create some Javascript that adds a class to kiddo when the user hovers over mama, and that class you add to kiddo changes the styles of kiddo when it is applied.
 
Upvote 0 Downvote
Mutiny, thanks a lot for your answer.
Indeed I had to. I was working nearly the whole night with css like .header:hover + .row [class^='kiddo'] etc...
without any result. The solution I did, was, of course to do it with jQuery, as its that simple just to do whatever you want with a simple $('#id') and it doesnt even matter where you are. I Just thought IDs are there to do such things. in manner of creating them as unique per site.
anyway.
thank again.
Greets from Austria
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom