Văn Lộc Văn Lộc - 3 months ago 10
CSS Question

Apply CSS only first element?

I create price form like this:

Please click to

full page
at bellow my code to easy look.



@import url('http://fonts.googleapis.com/css?family=Indie+Flower');
@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400,700');

body{
background-color: rgb(237, 237, 237);
}

#pricing{
width: 1340px;
/* margin: 100px auto; */
font-family: 'Open Sans', Helvetica;
}

.price_card{
width: 295px;
max-height: 173px;
background: rgb(255, 255, 255);
display: inline-table;
top: 0;
border: 1px solid green;
}
.price_card:not(:last-child){
margin-right: 32px;
}
.header{
color: rgb(255, 255, 255);
background-color: rgb(113, 191, 68);
font-size: 20px;
font-weight: 100;
height: 68px;
display: block;
text-align: center;
padding: 28px 0 0px;
}
.price{
width: 100%;
font-size: 18px;
font-weight: 300;
display: block;
text-align: center;
padding: 10px 0 10px;
}
.name{
width: 100%;
font-size: 25px;
font-weight: 100;
display: block;
text-align: center;
padding: 0;
}
.features{
list-style: none;
text-align: center;
color: rgb(255, 255, 255);
background-color: rgb(144, 205, 109);
margin: 0;
padding: 0;
}
.features li{
margin: 0 35px;
padding: 20px 15px;
width: 200px;
}
.features li:not(:last-child){
border: 1px solid rgb(242, 242, 242);
border-top: 0;
border-left: 0;
border-right: 0;
}
button{
color: rgb(255, 255, 255);
border: 0;
border-radius: 0px;
height: 42px;
width: 177px;
display: block;
font-weight: 200;
background-color: rgb(113, 191, 68);
font-size: 18px;
text-transform: uppercase;
margin: 20px auto 35px;
}

<div id="pricing">
<div class="content">
<h1>PRICE POPULAR CLOUD SERVICES</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione voluptates magnam nam eligendi, maiores quis, <br />ut perspiciatis odit eos accusamus modi sequi laborum veritatis quasi harum dolorem maxime, magni at!
</p>
<br />
</div>
<div class="price_card">
<div class="header">
<span class="name">Google Cloud</span>
</div>
<ul class="features">
<span class="price">800 USD</span>
</ul>
<button>More info</button>
</div>
<div class="price_card">
<div class="header">
<span class="name">Amazon Cloud</span>
</div>
<ul class="features">
<li class="price">1000 USD</li>
</ul>
<button>More info</button>
</div>
<div class="price_card">
<div class="header">
<span class="name">GO DADDY</span>
</div>
<ul class="features">
<li class="price">1200 USD</li>
</ul>
<button>More info</button>
</div>
<div class="price_card">
<div class="header">
<span class="name">PLUS+ </span>
</div>
<ul class="features">
<li class="price">2000 USD</li>
</ul>
<button>More info</button>
</div>
</div>





I have two question:

You can see:


  1. The first element of class:
    price_card
    is applied style CSS. Another is nothing.



Why I meet this problem?


  1. I don't have experience with the responsive website. Can you example at a resolution about 800x400 pixel? It auto scale only two card in first rows and two cards in second rows?


Answer

You are using a different HTML element in one of your blocks.

Change:

<div class="price_card">
<div class="header">
  <span class="name">Google Cloud</span>
</div>
<ul class="features">
  <span class="price">800 USD</span>
</ul>
<button>More info</button>

To:

<div class="price_card">
<div class="header">
  <span class="name">Google Cloud</span>
</div>
<ul class="features">
  <li class="price">800 USD</li>
</ul>
<button>More info</button>

Your unordered list had a "span" as the first child element, but should have had an "li" as the first child element.