Changing CSS Property From an Array using JS

Question

I am currently building a todo app, and from react, I am using CSS to custom my todo items' margin!

The problem is, I only needed the first element to have a margin-top of 110px. Here's what it'll look like when I apply it to every item - link

It's that the todolist items are too separated!

But if I removed the margin of 110px, the item is behind the textbox! link

Is there a way to change the property of first item? I can delete the margin-top: 110px from the css file, and change the 1st item using JS. My planned function -

function addTodo() {
  setList([...list, value]);
  const firstItem = list.findIndex(0);
}

Thanks!

Are you using map to render the values? I believe the change will need to be done where you render them — iunfixit
– iunfixit, Commented Aug 23, 2021 at 15:50
Please provide a minimal reproducible example in the question. You can likely use Stack Snippets (icon looks like <> in the toolbar) to do so. — Heretic Monkey
– Heretic Monkey, Commented Aug 23, 2021 at 16:30

M3rt · Accepted Answer · 2021-08-23 15:57:48Z

1

:first-of-type selector in CSS allows you to target the first occurence of an element within its container. Also, another option might be to select first child of the element, you can use :first-child pseudo-class.

answered Aug 23, 2021 at 15:57

M3rt

3884 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jaleda · Accepted Answer · 2021-08-23 16:25:37Z

There are several possibilities to solve this problem. I think the simplest one is to just build a container that contains all list items, and set it's padding-top or margin-top to 110px. The result could look like this:

.frame {
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  width: 200px;
  border: 1px solid #000;
  text-align: center;
}

.control-button {
  position: absolute;
}

/* this is the container that holds all your items */
.items-container {
  margin-top: 40px; /* in your case, it should be 110px */
}

.item {
  margin-top: 10px;
  border: 1px solid #000;
}

<html>
  <body>
    <div class="frame">

      <div class="control-button">
        <u>add item</u>
      </div>

      <!-- this is the important part, the container with the items -->
      <div class="items-container">
        <div class="item">
          This is an item.
        </div>
        <div class="item">
          This is another item.
        </div>
      </div>

    </div>
  </body>
</html>

I think this solution is the most simple and flexible one. You can easily add left, right or bottom margins too and you don't have to worry about which items it affects.

user13944038 · Accepted Answer · 2021-08-23 23:43:29Z

0

The simplest solution you can go with is using the :nth-child(n) pseudo class in CSS or :first-of-type.

Try this code:

.item:nth-child(1) {
  margin-top: 110px;
}

answered Aug 23, 2021 at 23:43

user13944038

Collectives™ on Stack Overflow

Changing CSS Property From an Array using JS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related