CODEWITHSUNDEEP
htmlcsscss-selectors
Morteza
Morteza

Reputation: 444

Getting the first child

I have div with two a tags in it I want to write css for the fist a tag.

Here is the HTML:.

<div id="Text">
    <br />                
    <a href="http://farsnews.com/newstext.php?nn=13920430001427#sthash.BOTOvYwM.dpuf">فارس نیوز</a>
    <a href="http://farsnews.com/newstext.php?nn=13920430001427#sthash.BOTOvYwM.dpuf">فارس نیوز</a>
</div>

and here is my css code:

#Text a:last-child{
    text-decoration: none;
    color: red; /*rgb(18, 139, 235)*/
}

Upvotes: 2

Views: 107

Answers (5)

Chandrakant
Chandrakant

Reputation: 1981

The problem is that the a is not the first-child within its parent that is DIV#text . The CSS first-child pseudo-class operates as follows:

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

When ready very literally, it will only apply to an element that is the first child within its parent. It does not take into consideration the context you (mentally) create when you add the additional class selectors to it.

When applying the pseudo-class the browser doesn't understand the context created by the selector. Basically, its checking that the element matches the selector #text a, then asking the question, "Is this the first child within the parent?". It asks this question without any consideration of the aforementioned selector. In your case, the answer is no since there is another element before the first a. that is <br/>(Same thing applied for last-child also)

In your example, the element <br/> is actually the first child.

so the conclusion is-

If you want to give style for a:first-child then it must be a first child of its parent i.e DIV#text

right now your first child is BR so please remove it

OR Else assign 

#Text a.q {
  ...
}

Or else 

#Text a:first-of-type {...}

The :first-of-type selector is supported in all major browsers, except IE8 and earlier.

Upvotes: 4

Butani Vijay
Butani Vijay

Reputation: 4239

You can write as follow :

div a.q {
  text-decoration: none;
   color: red; /*rgb(18, 139, 235)*/
}

or

  #Text a.q {
      text-decoration: none;
       color: red; /*rgb(18, 139, 235)*/
    }

Upvotes: 1

user2582303
user2582303

Reputation: 56

try this 

#Text a:first-child{
    /*your css */
}

Upvotes: 0

TotalWipeOut
TotalWipeOut

Reputation: 438

Try this

#Text a:first-of-type{
    /* css */
}

This will select the first <a> tag inside of #Text

Upvotes: 5

Gintas K
Gintas K

Reputation: 1478

#Text a.q {
  //css
}

you can do it like this

Upvotes: 3

Related Questions