is there a way to inherit css generic code

Question

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

Does this answer your question? https://stackoverflow.com/a/28061560/13927534 — Miss Skooter, Mar 21 '23 at 09:03
Adding this for reference: https://stackoverflow.com/questions/50406795/how-to-select-only-first-three-elements-with-css — Vinu Prasad, Mar 21 '23 at 09:07

Jordy · Answer 1 · 2023-03-21T09:19:50.040

2

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;
}

edited Mar 21 '23 at 09:19

answered Mar 21 '23 at 09:08

Jordy

1,802
2
6
25

for removing the &nbsp do you have any alternatives?the reason i put nbsp was due to rendering spill issue – Richard Mar 21 '23 at 09:23
Just replace the ` ` with `" "` alias space. – Jordy Mar 21 '23 at 09:26
If you mean like change
A for Apple
to
A for Apple
, that causes a rendering issue in Edge – Richard Mar 21 '23 at 09:33
My advice is to check some references like [this](https://answers.microsoft.com/en-us/microsoftedge/forum/all/edge-is-rendering-text-with-nbsp-instead-of-spaces/86b711ba-5eae-4a69-973b-6177334fbd85) or [this](https://stackoverflow.com/questions/62661003/in-inspect-mode-text-showing-nbsp-for-space-in-chrome). Or you can create a new question for that. – Jordy Mar 21 '23 at 09:40

score 1 · Accepted Answer · answered Mar 21 '23 at 09:07

1

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;
}

...

answered Mar 21 '23 at 09:07

Niccolò Mineo

83
1
9

yes it works , I realised n+1 th selectors can be treated just as other css tags so comma can be used .Thanks – Richard Mar 21 '23 at 09:19
for removing the &nbsp do you have any alternatives?the reason i put nbsp was due to rendering spill issue – Richard Mar 21 '23 at 09:23
1

I am not sure what you're trying to achieve there. What you could do would range from just using a space to wrapping the words you want in a `` and apply left and right paddings, if that's what you're after. – Niccolò Mineo Mar 21 '23 at 13:14

is there a way to inherit css generic code

2 Answers2

A for Apple

A for Apple