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

Question

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>

You may like to run your code through W3C validator as it throws error on the structure of your table. — A Haworth, Feb 14 '21 at 09:08
Could you describe what you want to happen with this selector: tfoot .shipmethod:nth-child(1) because the CSS seems to be related to a before or after pseudo element rather than an 'ordinary' element. Did you want it to be :before? — A Haworth, Feb 14 '21 at 15:22

score 0 · Answer 1 · answered Feb 14 '21 at 08:33

0

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");

answered Feb 14 '21 at 08:33

Sadra Saderi

52
1
8

1

You can filter by class, but it doesn't do what the code in the question thinks it does. For example, tr.shipmethod:nth-child(4) will find the 4th tr child of any parent and if it happens to have the class shipmethod it will select it. – A Haworth Feb 14 '21 at 09:23
@masoumeaskari Maybe you can fix it using the method in this answer: [https://stackoverflow.com/a/5428766](https://stackoverflow.com/a/5428766) – Sadra Saderi Feb 14 '21 at 11:48

score 0 · Answer 2 · answered Feb 14 '21 at 16:02

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

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

2 Answers2