How to apply a style on an element only once for the entire page?

Question

I need to apply a style only for the first child of the entire page, so for example if i have a class '.my-icon' that appears in multiple other divs - then i want them to not be affected so only the first-child "ever" will be affected, but without using id or jquery.

    <div>
      <div>
        <i class="my-icon">*</i> // only this element will be affected.
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
      <div>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
      <div>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
    </div>

I believe this answer may be of some help to you. You'll obviously have to change class names and such to get it to work for your situation: https://stackoverflow.com/a/8539107/2437278 — HighHopes, Jun 17 '19 at 05:49

score 3 · Accepted Answer · answered Jun 17 '19 at 05:45

<style>
div:nth-of-type(1) >.my-icon:first-child {
  color: lime;
  background-color: black; 
  padding: 5px;
}
</style>
<div>
  <div>
    <i class="my-icon">*</i> // only this element will be affected.
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
  <div>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
  <div>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
</div>

shivani · Answer 2 · 2019-06-17T05:49:29.030

.my-icon:nth-of-type(1)
{
    border:5px solid red;
}

<div>
  <div>
    <i class="my-icon">*</i> // only this element will be affected.
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
  <div>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
  <div>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
</div>

div:nth-of-type(1) >.my-icon:first-child {
  border:5px solid red;
}

<div>
  <div>
    <i class="my-icon">*</i> // only this element will be affected.
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
  <div>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
  <div>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
</div>

Please try this as a code snippet. The first icon of _all three_ blocks are selected. — stealththeninja, Jun 17 '19 at 05:40

score 1 · Answer 3 · answered Jun 17 '19 at 05:37

It's best if you can add another selector but if not then you can try the following snippet:

div:first-of-type > div:first-of-type > .my-icon:first-of-type {
  color: red;
}

<div>
      <div>
        <i class="my-icon">*</i> // only this element will be affected.
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
      <div>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
      <div>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
    </div>

score 1 · Answer 4 · answered Jun 17 '19 at 05:37

It's simple, use :first-child for your div and your icon

div>div:first-child .my-icon:first-child{
  color:red;
}

<div>
      <div>
        <i class="my-icon">*</i> // only this element will be affected.
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
      <div>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
      <div>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
    </div>

score 1 · Answer 5 · answered Jun 17 '19 at 05:55

1

div:first-child > .my-icon:first-child {
  /*your code here*/
}

It's simple, You can find the first div then find the first class .my-icon in it.

answered Jun 17 '19 at 05:55

Varun Raval

134
6

How to apply a style on an element only once for the entire page?

5 Answers5