when want add before element for nth chide not working to code me - Woocommerce

masoumeaskari
February 14, 2021
188 views
0 votes
2 Answers

I have a table to code and I want add :before and add image for before but when use :nth-child not working to code .
how to repair code CSS :nth-child not working to code ?? please help me I have force to repair code.
it is part of code and CSS
before of this code I have show before image but change to code html I cant repair code.

tfoot .shipmethod:nth-child(1),
tfoot .shipmethod:nth-child(4) label:before {
  background-image: url('../images/delivery-man.svg');
  background-size: 30px;
  display: inline-block;
  width: 30px;
  height: 30px;
  content: "";
  display: inline-flex;
  align-items: center;
  margin: 0 10px;
}

<tfoot>

  <tr class="cart-subtotal">
    <th>مجموع سبد خرید</th>
    <td><span class="woocommerce-Price-amount amount"><bdi>۱۲۳,۰۰۰<span class="woocommerce- 
     Price-currencySymbol">تومان</span></bdi>
      </span>
    </td>
  </tr>

  <tr class="woocommerce-shipping-totals shipping">

  </tr>
  <tr data-title="حمل و نقل">
  </tr>
  <tr id="shipping_method" class="woocommerce-shipping-methods">
  </tr>

  <tr class="titleshippng">
    <td>
      <h4>انتخاب شیوه ارسال</h4>
    </td>
    <td>

    </td>
  </tr>

  <tr class="shipmethod">
    <td><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate1" value="flat_rate:1" class="shipping_method" checked="checked"><label for="shipping_method_0_flat_rate1">پیک موتوری ( فقط برای شهر تهران - مدت زمان تحویل مرسوله حداکثر یک روز کاری): <span class="woocommerce-Price-amount amount"><bdi>۱۵,۰۰۰<span class="woocommerce-Price-currencySymbol">تومان</span></bdi></span></label></td>
    <td></td>
  </tr>

  <tr class="shipmethod">
    <td><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate2" value="flat_rate:2" class="shipping_method"><label for="shipping_method_0_flat_rate2">پست سفارشی ( مدت زمان تحویل مرسوله ۳ الی ۷ روز کاری): <span class="woocommerce-Price-amount amount"><bdi>۱۳,۰۰۰<span class="woocommerce-Price-currencySymbol">تومان</span></bdi></span></label></td>
    <td></td>
  </tr>

  <tr class="shipmethod">
    <td><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate3" value="flat_rate:3" class="shipping_method"><label for="shipping_method_0_flat_rate3">پست پیشتاز ( مدت زمان تحویل مرسوله ۲ الی ۴ روز کاری): <span class="woocommerce-Price-amount amount"><bdi>۱۸,۰۰۰<span class="woocommerce-Price-currencySymbol">تومان</span></bdi></span></label></td>
    <td></td>
  </tr>

  <tr class="shipmethod">
    <td><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate5" value="flat_rate:5" class="shipping_method"><label for="shipping_method_0_flat_rate5">پیک فوری یک الی دو ساعته ( فقط برای شهر تهران در روز و ساعت کاری - هزینه پیک در مقصد و از مشتری دریافت میشود.)</label></td>
    <td></td>
  </tr>


  <tr class="order-total">
    <th>مجموع</th>
    <td><strong><span class="woocommerce-Price-amount amount"><bdi>۱۳۸,۰۰۰<span class="woocommerce-Price-currencySymbol">تومان</span></bdi></span></strong> </td>
  </tr>


</tfoot>

Answers

By using :nth-child you can’t filter by class.

But you can use javascript .getElementsByClassName() to get all elements with a specific class and find the one you want.

.before-image label::before {
  background-image: url('../images/delivery-man.svg');
  background-size: 30px;
  display: inline-block;
  width: 30px;
  height: 30px;
  content: "";
  display: inline-flex;
  align-items: center;
  margin: 0 10px;
}

var shipmethodElements = document.getElementsByClassName("shipmethod");
shipmethodElements[3].classList.add("before-image"); // Fourth item

// Removing class
shipmethodElements[3].classList.remove("before-image");

The problem lies with the use of the nth-child pseudo class – it does not work the way the code assumes.

There are two selections which have to be tackled in different ways.

For the first, tfoot .shipmethod:nth-child(1), (where I assume there is also to be a :before as the given CSS relates to a pseudo element), we can adapt a method shown in [https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class][1] We set the pseudo element for all elements with class shipmethod and then remove it from all but the first one: Selecting all: tfoot > .shipmethod:before Removing from all but the first: tfoot > .shipmethod ~ .shipmethod:before

For the second, tfoot .shipmethod:nth-child(4) label:before, there is a specific id on the label already and this can be used to ensure we select the right label element: .shipmethod label[for=shipping_method_0_flat_rate5]:before

tfoot > .shipmethod:before,
tfoot .shipmethod label[for=shipping_method_0_flat_rate5]:before
 {
    background-image: linear-gradient(black, black),url('../images/delivery-man.svg');/* linear-gradient added just for the test */
    background-size: 30px;
    display: inline-block;
    width: 30px; 
    height: 30px;
    content:"";
    display: inline-flex;
    align-items: center;
    margin: 0 10px;
}
/* Select all but the first .shipmethod child of tfoot and don't display the before pseudo element */
tfoot > .shipmethod ~ .shipmethod:before {
  display: none;
}

<table>
  <tfoot>
  
            <tr class="cart-subtotal">
              <th>مجموع سبد خرید</th>
              <td><span class="woocommerce-Price-amount amount"><bdi>۱۲۳,۰۰۰<span class="woocommerce- Price-currencySymbol">تومان</span></bdi></span></td>
            </tr>           
            
            <tr class="woocommerce-shipping-totals shipping"></tr>
            <tr data-title="حمل و نقل"></tr>
            <tr id="shipping_method" class="woocommerce-shipping-methods"></tr>

            <tr class="titleshippng">
                    <td>
                        <h4>انتخاب شیوه ارسال</h4>
                    </td>
                    <td>
                        
                    </td>               
            </tr>
                                    
            <tr class="shipmethod"><td><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate1" value="flat_rate:1" class="shipping_method" checked="checked"><label for="shipping_method_0_flat_rate1">پیک موتوری ( فقط برای شهر تهران - مدت زمان تحویل مرسوله حداکثر یک روز کاری): <span class="woocommerce-Price-amount amount"><bdi>۱۵,۰۰۰<span class="woocommerce-Price-currencySymbol">تومان</span></bdi></span></label></td><td></td></tr>                 
                                    
            <tr class="shipmethod"><td><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate2" value="flat_rate:2" class="shipping_method"><label for="shipping_method_0_flat_rate2">پست سفارشی ( مدت زمان تحویل مرسوله ۳ الی ۷ روز کاری): <span class="woocommerce-Price-amount amount"><bdi>۱۳,۰۰۰<span class="woocommerce-Price-currencySymbol">تومان</span></bdi></span></label></td><td></td></tr>                  
                                    
            <tr class="shipmethod"><td><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate3" value="flat_rate:3" class="shipping_method"><label for="shipping_method_0_flat_rate3">پست پیشتاز ( مدت زمان تحویل مرسوله ۲ الی ۴ روز کاری): <span class="woocommerce-Price-amount amount"><bdi>۱۸,۰۰۰<span class="woocommerce-Price-currencySymbol">تومان</span></bdi></span></label></td><td></td></tr>                  
                                    
            <tr class="shipmethod"><td><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate5" value="flat_rate:5" class="shipping_method"><label for="shipping_method_0_flat_rate5">پیک فوری یک الی دو ساعته ( فقط برای شهر تهران در روز و ساعت کاری - هزینه پیک در مقصد و از مشتری دریافت میشود.)</label></td><td></td></tr>                   
                            
            <tr class="order-total">
               <th>مجموع</th>
               <td><strong><span class="woocommerce-Price-amount amount"><bdi>۱۳۸,۰۰۰<span class="woocommerce-Price-currencySymbol">تومان</span></bdi></span></strong> </td>
            </tr>
   </tfoot>

Note: adding the pseudo element to the first shipmethod has a rather strange result – pushing the text to the next cell – is this what was intended? Do you want display: inline-flex here or did you intent the small image to be just before the text and in the same cell?
[1]: CSS selector for first element with class

Please signup or login to give your own answer.

Click here to cancel reply.

when want add before element for nth chide not working to code me – Woocommerce

Answers