0

Why doesn't the first-child selector work for span tag? It works perfectly fine for p tag but it doesn't affect the span tag for some reason. The zone and seat should be under the "3" and "23D".

Maybe there's other way to write it to single line but I have no idea how. On the other hand I tried to give first span tag a class with the same code and :first-child selector worked for some reason.

* {
  margin: 0px;
  padding: 0px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  display: -ms-grid;
  display: grid;
  place-items: center;
  height: 100vh;
}

.card {
  width: 400px;
  height: 600px;
}

h1, p, span {
  margin-bottom: 10px;
}

p {
  letter-spacing: 4px;
}

.first-half {
  background-color: #FEEAE9;
  padding: 20px;
  border-radius: 20px 20px 0px 0px;
  width: 100%;
  height: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: #F97065;
}

.first-half p {
  letter-spacing: 1px;
}

.first-half hr {
  margin-right: 20px;
}

.second-half {
  background-color: #2955F4;
  width: 100%;
  height: 50%;
  border-radius: 0px 0px 20px 20px;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 10px;
}

.row-row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(50%, 1fr))[auto-fill];
      grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
}

.row-row p {
  border-bottom: 1px solid black;
  margin-right: 20px;
  padding-bottom: 5px;
}

.row-row-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
}

.row-row-2 p {
  border-bottom: 1px solid black;
  padding-bottom: 5px;
  margin-right: 20px;
}

.row-row-2 p:first-child {
  grid-column: span 2;
}

.row-row-2 span:first-child {
  grid-column: span 2;
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
       <div class="first-half">
            <h1>Omega</h1>
            <div class="row">
                <p>Flight 673 /// Nov. 3, 2018</p>
                <span> </span>
            </div>

            <p>Solange Ora</p>
            <hr>
            <span>Passenger</span>
            <div class="row-row">
                  <p>11:37AM EST</p>
                  <p>F-35</p>
                  <span>Boarding time</span>
                  <span>Gate</span>

            </div>

            <div class="row-row-2">
                <p>Priority</p>
                <p>3</p>
                <p>23D</p>
                <span>Class</span>
                <span>Zone</span>
                <span>Seat</span>

          </div>
         
            
            
       </div>
       
        <div class="second-half">
            <h2>haha</h2>
        </div>
    </div>
</body>
</html>
Spreceriany
  • 89
  • 7
  • Welcome to Stack Overflow! Please take the [tour] (you get a badge!), have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) I also recommend Jon Skeet's [Question Checklist](https://codeblog.jonskeet.uk/2012/11/24/stack-overflow-question-checklist/). Please [**search thoroughly**](/search?q=%5Bcss%5D+first-child+not+working) before posting. More about searching [here](/help/searching). – T.J. Crowder Nov 02 '20 at 08:45
  • Change the selector to `:first-of-type` instead of `:first-child` – Sara Stoimenovska Nov 02 '20 at 08:47

0 Answers0