CODEWITHSUNDEEP
css
Bobby
Bobby

Reputation: 537

After CSS Selector

Does the after pseudo element select every single child that the after pseudo element is applied to? For example:

.clear-fix {
    zoom: 1;   
}

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

<ul class="meals-showcase clearfix">
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/5.jpg" alt="Paleo beef steak with vegetables">
                </figure>
            </li>
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/6.jpg" alt="Healthy baguette with egg and vegetables">
                </figure>
            </li>
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/7.jpg" alt="Burger with cheddar and bacon">
                </figure>
            </li>
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/8.jpg" alt="Granola with cherries and strawberries">
                </figure>
            </li>
</ul>

For example above the clearfix class was attached to that ul element. Does that mean each li inside of the ul will get the css properties described in the .clearfix class or only the ul will be affected?

Upvotes: 0

Views: 78

Answers (1)

user4431269
user4431269

Reputation:

I think you mean this and no it only applied to the element you call (your example .clearfix ) 

.clearfix {
  zoom: 1;
}

/* .clearfix and (,) .clearfix direct (<) child (<li> in example) */

.clearfix:after,
.clearfix > *:after {
  content: ".";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
<ul class="meals-showcase clearfix">
  <li>
    <figure class="meal-photo">
      <img src="resources/img/5.jpg" alt="Paleo beef steak with vegetables">
    </figure>
  </li>
  <li>
    <figure class="meal-photo">
      <img src="resources/img/6.jpg" alt="Healthy baguette with egg and vegetables">
    </figure>
  </li>
  <li>
    <figure class="meal-photo">
      <img src="resources/img/7.jpg" alt="Burger with cheddar and bacon">
    </figure>
  </li>
  <li>
    <figure class="meal-photo">
      <img src="resources/img/8.jpg" alt="Granola with cherries and strawberries">
    </figure>
  </li>
</ul>

More info about selectors to start with: W3C selectors

Upvotes: 1

Related Questions