SCSS selectors, can I get a elm in a child of a parent

Question

So I have a HTML structure like this:

<g>
    <text></text>
</g>
<g>
    <g> 
        <path></path>
    </g>
    <g> 
        <text></text>
    </g>
</g>

And I want to change the text elements css after a psudeo :hover from path, can I target this somehow with SCSS? Here is what I have so are:

g{
   path{
     &:hover {
        && + g{
           text{
              opacity: 1.0 !important;
              filter: alpha(opacity=100) !important;

So I just want to grab the side by g tag from the path tags css, is this possible?

Perphaps this can help you out: https://css-tricks.com/child-and-sibling-selectors/ — Huso, Apr 08 '16 at 12:23
The `text` cannot be affected by a subsequest sibling or descendant...you can't go back up the DOM. — Paulie_D, Apr 08 '16 at 12:28
Unless you have a Sass->CSS compilation issue, **only post the compiled CSS**. — cimmanon, Apr 08 '16 at 12:59

score 2 · Answer 1 · answered Apr 08 '16 at 12:27

In CSS you are not able to address a parent from a specific action on a child element ... as SASS only generates CSS it's then impossible too.

A solution could be to put a text element in each path elements (or g elements containing path) and then, to write :

HTML :

<g>
    <g> 
        <path>
             <text></text>
        </path>
    </g>
</g>

SCSS :

g {
   g:hover > path > text {
       color: #FFF;
   }
}

If you don't want to modify HTML structure, and want to modify the style of a parent element from the hover pseudo selector of a child, you should use Javascript or a Javascript framework/library (like jQuery, Angular, React, ...).

SCSS selectors, can I get a elm in a child of a parent

1 Answers1