css Question posted in
Some basic documentation can be found here.

Problem with first of type in css and nobody knows why

"first of type" dont like to work:

.elements {
    width:70%;
    margin:0 auto;
    display:flex;
    flex-direction: column;
    .addElement {
        width:280px;
        text-align: center;
        border:1px solid black;
        font-family: "Playwrite CO", cursive;
        margin-bottom: 25px;

        &:hover {
            cursor: pointer;
        }
    }
    &__newElement {
        display: inline-block;
        margin-top:10px;
        margin-bottom:10px;
        padding: 10px;
        border:1px solid black;
        font-family: "Playwrite CO", cursive;

        &:first-of-type {
            margin-top: 0 !important;
        }
    }
}

HTML:

<!DOCTYPE html>
<html lang="DE">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Link Tree Clone</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playwrite+CO:[email protected]&display=swap" rel="stylesheet">
</head>
<body>
    <main class="elements">
        <div class="addElement"><p>Neuen Eintrag hinzufügen!</p></div>
    </main>

    <script src="javascript/main.js"></script>
</body>
</html>

i try to set the margin-top, of the first element which has the class"elements__newElement" to 0.
Nobody knows the answer……………………………………………………………………………….

Tags:

2

Answers


  1. 0

    Your CSS won’t work if none of the .elements__newElement is the first of type of the same tag on the same layer. Such as

    <main class="elements">
  <div class="addElement"><p>Neuen Eintrag hinzufügen!</p></div>
  <!-- .elements__newElement:first-of-type does not work since the first type of div on this layer is the element above -->
  <div class="elements__newElement"><p>New Element 1</p></div>
  <div class="elements__newElement"><p>New Element 2</p></div>
  <div class="elements__newElement"><p>New Element 3</p></div>
</main>

    What you could do is to use something like to mimic ".first-of-class" behavior, if all the .elements__newElement are consecutive:

    .elements__newElement:not(.elements__newElement + .elements__newElement)

    It means select .elements__newElement that is not preceded by another .elements__newElement, which will only select the first .elements__newElement.

    With pre-processors like SCSS or LESS, it could be shortened like:

    &__newElement {
  display: inline-block;
  margin-top:10px;
  margin-bottom:10px;
  padding: 10px;
  border:1px solid black;
  font-family: "Playwrite CO", cursive;

  &:not(& + &) {
    margin-top: 0;
  }
}

    Here’s a live demo:

    .elements__newElement {
  color: blue;
}

.elements__newElement:not(.elements__newElement + .elements__newElement) {
  color: red;
}
    <main class="elements">
    <div class="addElement"><p>Neuen Eintrag hinzufügen!</p></div>
    <div class="elements__newElement"><p>New Element 1</p></div>
    <div class="elements__newElement"><p>New Element 2</p></div>
    <div class="elements__newElement"><p>New Element 3</p></div>
    <div class="elements__newElement"><p>New Element 4</p></div>
</main>
    Login or Signup to reply.
  2. 0

    The :first-of-type selector works on the first occurrence of the type of the HTML element, in this case: div.

    Because the first div in the container is actually the .addElement div, but this div doesnt have the class .elements__newElement, the selector doesn’t actually select anything.

    The first-of-type selector is only applied to the first html element in the parent container that matches the type and matches the css selector, in your case, nothing.

    A solution is to move the .addElement div out of the .elements parent container and into it’s own container.

    See the demo below.

    document.querySelector('.addElement').addEventListener('click', e => {
  const newElement = document.createElement('div')
  newElement.classList.add('elements__newElement')
  newElement.innerText = 'New Element'
  document.querySelector('.elements').appendChild(newElement)
})
    .addElementWrapper, .elements {
  width: 70%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  font-family: "Playwrite CO", cursive;  
}

.addElement {
  border: 1px solid black;
  cursor: pointer;
  text-align: center;
  margin-bottom: 25px;
  width: 280px;
}

.elements__newElement {
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid black;
}

.elements__newElement:first-of-type {
  margin-top: 0 !important;
}
    <div class="addElementWrapper">
  <div class="addElement">Add Element</div>
</div>
<div class="elements">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search