Question 43711 in Html Question posted in
Some basic documentation can be found here.

is there a way to inherit css generic code – Html

body {
    background-color:#DFE1E1;
    font-family:sans-serif;
     margin-left:30%;
    }
  
    /*1st */
h1:nth-child(1) { 
  color: red;
  border:5px solid rebeccapurple;
  overflow:hidden;
  animation: animate 5s ease-in 1 forwards;
}

    /*2nd */

h1:nth-child(2) { 
  color: red;
  border:5px solid blue;
  overflow:hidden;
  animation: animate 5s ease-in 1 forwards;
}
    /*3rd */

h1:nth-child(3) { 
  color: red;
  border:5px solid green;
  overflow:hidden;
  animation: animate 5s ease-in 1 forwards;
}


@keyframes animate{
  0%{
    width: 0;
  }
  100%{
    width:250px;
  }
}
<h1>A&nbsp;for&nbsp;Apple</h1>
    <h1>B&nbsp;for&nbsp;Blue</h1>
    <h1>C&nbsp;for&nbsp;Car</h1>
    <h1>D&nbsp;for&nbsp;Doctor</h1>
    <h1>E&nbsp;for&nbsp;Egg</h1>
    <h1>F&nbsp;for&nbsp;Frog</h1>
    <h1>G&nbsp;for&nbsp;Girl</h1>

As you can observe I have mostly ended up duplicating my CSS Code in h1:nth-child tags other than the border:5px solid ;
tag ,so can someone show an alternative way to reduce this nth of css code duplicacy .scenario would be like: nth code for A for apple will have a different border color, n+1 code for B for Boy will have some other different color tag so all in all 26 different border color tag

Tags:

2

Answers


  1. 0

    Can’t you just have:

    h1:nth-child(1),
h1:nth-child(2),
h1:nth-child(3) { 
  color: red;
  border-width: 5px;
  border-style: solid;
  overflow: hidden;
  animation: animate 5s ease-in 1 forwards;
}

h1:nth-child(1) {
 border-color: rebeccapurple;
}

h1:nth-child(2) { 
  border-color: blue;
}

h1:nth-child(3) { 
  border-color: green;
}

...
    Login or Signup to reply.
  2. 0

    Just use comma , for remove CSS duplicates like this:

    body {
    background-color:#DFE1E1;
    font-family:sans-serif;
     margin-left:30%;
    }

h1:nth-child(1), h1:nth-child(2), h1:nth-child(3) {
  color: red;
  overflow:hidden;
  animation: animate 5s ease-in 1 forwards;
  border: 5px solid;
}
    /*1st */
h1:nth-child(1) { 
  border-color: rebeccapurple;
}

    /*2nd */
h1:nth-child(2) {
  border-color: blue;
}
    /*3rd */

h1:nth-child(3) { 
  border-color: green;
}

@keyframes animate{
  0%{
    width: 0;
  }
  100%{
    width:250px;
  }
}
    <h1>A&nbsp;for&nbsp;Apple</h1>
    <h1>B&nbsp;for&nbsp;Blue</h1>
    <h1>C&nbsp;for&nbsp;Car</h1>
    <h1>D&nbsp;for&nbsp;Doctor</h1>
    <h1>E&nbsp;for&nbsp;Egg</h1>
    <h1>F&nbsp;for&nbsp;Frog</h1>
    <h1>G&nbsp;for&nbsp;Girl</h1>

    Or if you want simplify it again, you can use :nth-child(-n+3) to select the first 3 of the child element like this:

    h1:nth-child(-n+3) {
  color: red;
  overflow:hidden;
  animation: animate 5s ease-in 1 forwards;
  border: 5px solid;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search