html - Using CSS to remove the second occurrence of a select result

Question

I am using an HTML template that has 3 blocks in the footer that are divs with classes: col-md-6 col-lg-4. Using CSS I would like to remove the second one that is selected from the class filter since the template plugin does not allow me to add JavaScript. Please see HTML below.

<div class="row"> 
            <div class="col-md-6 col-lg-4">
                        <div class="iq-fancy-box-04">
                <div class="iq-icon">
                    <i aria-hidden="true" class="ion-ios-location-outline"></i>
                    </div>
                    <div class="fancy-content">
                    <h5>Address</h5>
                    <span>#################</span>
                </div>
                </div>
                    </div>
            <div class="col-md-6 col-lg-4">
                        <div class="iq-fancy-box-04">
                <div class="iq-icon">
                    <i aria-hidden="true" class="ion-ios-telephone-outline"></i>
                    </div>
                    <div class="fancy-content">
                    <h5>Phone</h5>
                    <span class="lead"><a href="tel:"></a></span>
                    <p></p>
                </div>
            </div>
                    </div>
            <div class="col-md-6 col-lg-4">
                        <div class="iq-fancy-box-04">
                <div class="iq-icon">
                    <i aria-hidden="true" class="ion-ios-email-outline"></i>
                </div>
                <div class="fancy-content">
                    <h5>Email</h5>
                    <span><a href="mailto:#########">########</a></span>
                    <p></p>
                </div>
            </div>
                        </div>
        </div>

question from:https://stackoverflow.com/questions/65918725/using-css-to-remove-the-second-occurrence-of-a-select-result

Answer 1

Simply add .col-md-6.col-lg-4:nth-child(2) { display: none; } to your CSS and you`re fine:

.col-md-6.col-lg-4:nth-child(2) { 
  display: none; 
} 

<div class="row"> 
            <div class="col-md-6 col-lg-4">
                        <div class="iq-fancy-box-04">
                <div class="iq-icon">
                    <i aria-hidden="true" class="ion-ios-location-outline"></i>
                    </div>
                    <div class="fancy-content">
                    <h5>Address</h5>
                    <span>#################</span>
                </div>
                </div>
                    </div>
            <div class="col-md-6 col-lg-4">
                        <div class="iq-fancy-box-04">
                <div class="iq-icon">
                    <i aria-hidden="true" class="ion-ios-telephone-outline"></i>
                    </div>
                    <div class="fancy-content">
                    <h5>Phone</h5>
                    <span class="lead"><a href="tel:"></a></span>
                    <p></p>
                </div>
            </div>
                    </div>
            <div class="col-md-6 col-lg-4">
                        <div class="iq-fancy-box-04">
                <div class="iq-icon">
                    <i aria-hidden="true" class="ion-ios-email-outline"></i>
                </div>
                <div class="fancy-content">
                    <h5>Email</h5>
                    <span><a href="mailto:#########">########</a></span>
                    <p></p>
                </div>
            </div>
                        </div>
        </div>