CODEWITHSUNDEEP
htmlcsscss-selectors
Angel Miladinov
Angel Miladinov

Reputation: 1655

css first child not working when selection is inside another class

I've got the following html

<div class="product-info-top">                    
<div class="price-box">
    <span class="regular-price hide-in-list">
        <span class="price">$10</span>                                    
    </span>
    <a href="#" class="minimal-price-link">
        <span class="price">$8.50</span>
    </a>
</div>
<div class="product-name-wrap">
    <h2 class="product-name">
        <a href="#" title="Sleepers V2 Insomniac">Sleepers Insomniac</a>
    </h2>
    <p class="parent-cat-name">Playing Cards</p>                    
</div>

And I want to select with css only the first span with class="price" and it works the following way:

.product-info-top .price-box .price:first-child

And I get the span with the $10 price in this case. But when the html is like this:

<div class="product-info-top">                     
<div class="price-box">                             
    <p class="old-price">
        <span class="price">$7.49</span>
    </p>
    <p class="special-price">
        <span class="price">$5</span>
    </p>
</div>
<div class="product-name-wrap">
    <h2 class="product-name">
        <a href="#" title="LTD Purple">LTD Purple</a>
    </h2>
    <p class="parent-cat-name">Playing Cards</p>                    
</div>

It does not work because it's the span with class="price"is inside p tag How can I make css selector which works for both examples ?

Edit:

There is one more thing I need to select along with the other ones hmtl:

<div class="product-info-top">                                                      
<div class="price-box">
    <span class="price">$29.95</span>                                                                            
</div>  
<div class="product-name-wrap">
    <h2 class="product-name">
        <a href="#" title="All Black Pack">All Black Pack</a>
    </h2>
    <p class="parent-cat-name">Playing Cards</p>                    
</div>

I have tried this .product-info-top .price-box *:first-child .price but it does not work for the last example

Upvotes: 1

Views: 324

Answers (3)

sol
sol

Reputation: 22919

.product-info-top .price-box span .price,
.product-info-top .price-box p:first-of-type .price
{
  color: red;
}
<div class="product-info-top">
  <div class="price-box">
    <span class="regular-price hide-in-list">
        <span class="price">$10</span>
    </span>
    <a href="#" class="minimal-price-link">
      <span class="price">$8.50</span>
    </a>
  </div>
  <div class="product-name-wrap">
    <h2 class="product-name">
      <a href="#" title="Sleepers V2 Insomniac">Sleepers Insomniac</a>
    </h2>
    <p class="parent-cat-name">Playing Cards</p>
  </div>

  <div class="product-info-top">
    <div class="price-box">
      <p class="old-price">
        <span class="price">$7.49</span>
      </p>
      <p class="special-price">
        <span class="price">$5</span>
      </p>
    </div>
    <div class="product-name-wrap">
      <h2 class="product-name">
        <a href="#" title="LTD Purple">LTD Purple</a>
      </h2>
      <p class="parent-cat-name">Playing Cards</p>
    </div>

Upvotes: 0

Sahil Dhir
Sahil Dhir

Reputation: 4250

You can do this with * the universal selector to do the trick.

The * selector will see all the child elements with class price and will target according to the parent element ie. price-box.

Below is the working snippet:

.price-box *:first-child .price {
  color: green;
  background: yellow;
}
<div class="product-info-top">
  <div class="price-box">
    <span class="regular-price hide-in-list">
        <span class="price">$10</span>
    </span>
    <a href="#" class="minimal-price-link">
      <span class="price">$8.50</span>
    </a>
  </div>
  <div class="product-name-wrap">
    <h2 class="product-name">
      <a href="#" title="Sleepers V2 Insomniac">Sleepers Insomniac</a>
    </h2>
    <p class="parent-cat-name">Playing Cards</p>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/><br/><br/><br/><br/><br/>

  <div class="product-info-top">
    <div class="price-box">
      <p class="old-price">
        <span class="price">$7.49</span>
      </p>
      <p class="special-price">
        <span class="price">$5</span>
      </p>
    </div>
    <div class="product-name-wrap">
      <h2 class="product-name">
        <a href="#" title="LTD Purple">LTD Purple</a>
      </h2>
      <p class="parent-cat-name">Playing Cards</p>
    </div>

Upvotes: 1

Nick De Jaeger
Nick De Jaeger

Reputation: 1249

.product-info-top .price-box *:first-child .price {
  color: red;
}
<div class="product-info-top">                    
<div class="price-box">
    <span class="regular-price hide-in-list">
        <span class="price">$10</span>                                    
    </span>
    <a href="#" class="minimal-price-link">
        <span class="price">$8.50</span>
    </a>
</div>
<div class="product-name-wrap">
    <h2 class="product-name">
        <a href="#" title="Sleepers V2 Insomniac">Sleepers Insomniac</a>
    </h2>
    <p class="parent-cat-name">Playing Cards</p>                    
</div>                                      


<div class="product-info-top">                     
<div class="price-box">                             
    <p class="old-price">
        <span class="price">$7.49</span>
    </p>
    <p class="special-price">
        <span class="price">$5</span>
    </p>
</div>
<div class="product-name-wrap">
    <h2 class="product-name">
        <a href="#" title="LTD Purple">LTD Purple</a>
    </h2>
    <p class="parent-cat-name">Playing Cards</p>                    
</div>

Upvotes: 3

Related Questions