CODEWITHSUNDEEP
htmlcsscss-selectors
user2992672
user2992672

Reputation: 408

Css for child elements

I have few pages that have different structure inside the parent div 

<div class="post-formatting">
     <p>some text
           <em>
                <a href="http://example.com">Click here</a>
           </em>
     </p>
 </div>

<div class="post-formatting">
     <p>some text
           <a href="http://example-2.com">Click here</a>
     </p>
     <div>
           <a href="http://example-3.com">Click here</a>
     </div>
 </div>

<div class="post-formatting">
      <a href="http://example-4.com">Click here</a>
</div>

I need to set up a common CSS rule for all <a> tags within the <div class="post-formatting">, dependless whether it's a first child or not. Is there a way to do that? Thnx

Upvotes: 2

Views: 45

Answers (4)

Viktor Maksimov
Viktor Maksimov

Reputation: 1465

.post-formatting > *:first-child a, .post-formatting > a:first-child {  }

Upvotes: 0

abidkhanweb
abidkhanweb

Reputation: 50

You can do something like this:

.post-formatting a {
/* your css */

}

Upvotes: 0

oshell
oshell

Reputation: 9123

/* all a tags within .post-formatting */
.post-formatting a {
   /* css rules */
}

/* only the first a tag within .post-formatting */
.post-formatting a:first-child {
   /* css rules */
}

/* all but the first a tags in .post-formatting */
.post-formatting a:not(:first-child){
   /* css rules */
}

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128856

Yes. This is very basic CSS. You can achieve this quite simply with:

.post-formatting a {
    /* Your style declarations here. */
}


.post-formatting a {
  color: red;
  font-weight: bold;
}
<div class="post-formatting">
  <p>
    some text
    <em>
      <a href="http://example.com">Click here</a>
    </em>
  </p>
</div>
<div class="post-formatting">
  <p>some text
    <a href="http://example-2.com">Click here</a>
  </p>
  <div>
    <a href="http://example-3.com">Click here</a>
  </div>
</div>
<div class="post-formatting">
  <a href="http://example-4.com">Click here</a>
</div>

Upvotes: 3

Related Questions