CODEWITHSUNDEEP
csscss-selectors
Gagan deep
Gagan deep

Reputation: 11

I cant figure out why my css styling is interfering with each other?

Well I am trying to style links but for my nav is also getting affected .

I tried to position them different lexically but the block which is written afterwards seems to have affect.

/*---navbar---*/
  .main-nav li a:link,a:visited{
    padding:8px 0;
    color:white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    border-bottom: transparent;
    transition: border-bottom 0.3s;
 }
.main-nav li a:hover,a:active{
    border-bottom: 2px solid #e58e26;

}

/*---links---*/
a:link,
a:visited {
    color: #e67e22;
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 1px solid #e67e22;

    transition: border-bottom 0.2s, color 0.2s;
}

a:hover,
a:active {
    color: #555;
    border-bottom: 1px solid transparent;
}

Upvotes: 1

Views: 75

Answers (1)

symlink
symlink

Reputation: 12209

Here is your problem:

.main-nav li a:link,a:visited{
   /* style rules */
}
.main-nav li a:hover,a:active{
   /* style rules */
}

Each comma separated selector needs to be written in full:

.main-nav li a:link, .main-nav li a:visited{
   /* style rules */
}
.main-nav li a:hover, .main-nav li a:active{
   /* style rules */
}

Upvotes: 2

Related Questions