Css3 rules for transitions within other rules

Question

Css3 rules for transitions within other rules

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

Is there any way to introduce the rules one into the other? Let me explain:

I have this html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Prueba de animaciones CSS3</title>
</head>
<body>
    <div id="maestro">
        <div id="in">
            <p id="sup">HOLA</p>
            <p id="inf">HOLA</p>
        </div>
    </div>
</body>
</html>

and what I want is that when I move the mouse over the div "master" it changes the background color and the "p" change position, so that the one that is present "sup" goes upwards , and upload the other "p" with id "inf". The effect is achieved:

This is the CSS:

body{
    font-family: Arial, Helvetica, sans-serif;
}

#maestro{
    width: 150px;
    height: 150px;
    border-radius: 5px;
    border: 1px solid orange;
    background-color: orange;
    font-size: 1.5em;
    text-align: center;
    transition: all 0.3s;
    transition-timing-function: ease-out;
    position: relative;
}

#maestro:hover{
    background-color: white;
}

#maestro:hover #sup{
    top: -100%;
}

#maestro:hover #inf{
    top: 0;
}

#in{
    height: 40%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

#sup{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.2s;
    color: white;
}

#inf{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    transition: all 0.2s;
    color: orange;
}

Then, what does my question mean? Is there any way to make it easier, I mean:

#maestro:hover{
    background-color: white;
}

#maestro:hover #sup{
    top: -100%;
}

#maestro:hover #inf{
    top: 0;
}

These rules put them into one. Once I thought I saw something like this:

#maestro:hover{
  #inf{
   /*reglas*/
  }
  #sup{
   /*reglas*/
  }
}

Is it possible? Or I just misjudged what I saw. I find it a bit annoying to have so many rules for the hover of the master div. Thanks in advance.

css3 css

asked by H. Díaz 26.06.2018 в 14:29

source

2 answers

Upload one or more files to server received in a json Descending order in Datatable

score 1 · Answer 1

With pure css can not be simplified, as Jonhatan said you could use some pre-processor, but with the little code that is your example I do not see much need to do it, but if you want you can see how to simplify it with Sass or Less.

score 1 · Answer 2

That way of joining the CSS is called SASS or SCSS, it would look something like this:

div#maestro{
    &:hover{
      #inf{
        /*reglas*/
      }
      #sup{
        /*reglas*/
      }
    }
}

What you have to do is create a file with extension scss and use this program to compile it in css: link

Using SASS or SCSS, LESS, you will create style sheets much faster.