-1

I have multiple divs inside a div with a class of .grid. Inside those divs i have a link in each. I styled those links by using the selector .grid div a. After that i added another link in each div, and gave it a class .name and selected it using .grid div .name. The problem is that these new links with class name are affected by the cascade. Why is that happening? .grid div .name selector is more specific right? This is my CSS This is for making a div into a clickable link

.grid div a
{
position:absolute;
width: 100%;
height: 100%;
top:0;
left:0;
text-decoration: none;
z-index: 1;
}
This is the style for the other links
.grid div.name
{
position: absolute;
height: 20px;
width: 120px;
font-family: lato;
color:  #424242;
}

Click for image

Razvan Pop
  • 198
  • 9

3 Answers3

1

This is the style for the other links

.grid div.name

No, it isn't!

This would be:

.grid div a.name

or

.grid div .name


.grid div a.name {
  background: pink;
}
<div class="grid">
  <div>
    <a href="#1">First Link</a>
    <a href="#2" class="name">Name Link</a>
  </div>
</div>

Your current selector selects divs with a class of name because there is no "space" between the element type and the class.

Community
  • 1
  • 1
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Then you need to provide a demo of you HTML and CSS. – Paulie_D Aug 05 '16 at 13:45
  • So what are you trying to do? – Paulie_D Aug 05 '16 at 13:55
  • I am trying to do a clickable article grid. For that i created a link inside the div, set its height and width to 100%, so its a div that acts as a link. But inside that div i have another link, and need to style that separately but it inherits the styling for the div sized links. – Razvan Pop Aug 05 '16 at 13:57
  • The second link is the article authors name. I want to link the name to a page with all that authors articles. – Razvan Pop Aug 05 '16 at 14:00
  • So change the selector for the first link so those style are only applied to THAT link. Give it a class or something and use that, then the generic styles won't apply to **all** links. – Paulie_D Aug 05 '16 at 14:02
0

You are expecting it to work the other way around. Both the links are selected by the CSS of .grid div a.

If there are styles that you want to NOT affect the .grid div a.name selectors then change your CSS in that second definition to re-override them back to what you want them to be.

e.g if the first one has font-size: 2em, change the .name definition to alter it back to font-size: 1em.

RussAwesome
  • 464
  • 5
  • 18
  • Ok.. But isnt the presence of 2 class selector be enough to override the first styling? – Razvan Pop Aug 05 '16 at 13:40
  • The first one says "style all links on this page" the second one says "style all links on this page IF they've got a class of name". Any conflicts will be won by the .name selector as it is more specific. However, as mentioned in another answer, check your .name is against the a link rather than the div. – RussAwesome Aug 05 '16 at 13:43
  • I think you need to post your HTML as well as your CSS, because that's different to the code you entered in your question above. – RussAwesome Aug 05 '16 at 14:02
  • jsfiddle.net/roppazvan/fq44cpcb/#&togetherjs=72HDywO1Me – Razvan Pop Aug 05 '16 at 14:02
0

you can try like this nth child concept:

div a:nth-child(1){color:green;}
Pramod Kharade
  • 2,005
  • 1
  • 22
  • 41