Change Border value?

[Doodayer]

How would i go about changing the value of the border in this:

nav li a {
    display: block;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-weight: 700;
    text-decoration: none;
    height: 30px; /* set a height */
    line-height: 30px; /* vertically align the text */
    padding: 0 15px; /* breathing room */
    background-color: #333333;
    color:#ffffff;
}

inside of this:

nav li #faq:hover {
    background-color:#FF4747;
}

?

thanks!

[itsLeon]

What border?

[Doodayer]

its not inside of that one, it was just an example

[Paulie_D]

Your question is about changing a border value…presumably on hover…but you don’t have a border in your code.

How are we supposed to know what it is you are trying to do…we’re not psychic!?

If you have a problem…demo the problem…help us help you.

[Doodayer]

all in need to know how to do really is change any css values inside a different bit of css.

[Paulie_D]

all in need to know how to do really is change any css values inside a different bit of css.

I have no idea what that means.

Change what values…when?

[Doodayer]

so if i have <li> id=”a” and another with id=”b”

i want to change the css of #a, inside of #b

li #a {
     some css;
}

li #a {
     change that some css inside #a;
}

[Paulie_D]

We obviously have a language barrier.

What is the relationship of #a to #b?

What would cause the CSS to change?

[jpistolas]

Not sure of what you want to do, but if its adding a border, try this:

border: 1px solid #000;

example:

nav li #faq:hover {
background-color:#FF4747;
border: 1px solid #000;
}

[Doodayer]

#a and #b have no relation other than they are both links in the navigational bar.

So if i have this bit of code

nav li #a:hover {
     border: 1px solid #000;
}
 

how can i take this

nav li #b:hover {
    
}

and change the value of #a’s border inside of #b?

[jpistolas]

Maybe they want to change borders on hover state and don’t know how to add them to the entire list of anchor tags????

Total guess,
http://codepen.io/anon/pen/XJJoMM

[Doodayer]

exactly so inside of this

.nav li a {
    float:left;
  height:50px;
  width:50px;
  padding:10px;
  background-color:#f00;
  border: 2px solid #ff0;
}
.nav li a:hover #a{
     border: 2px solid #000;
}

how can i change the border value of

.nav li a {
    float:left;
  height:50px;
  width:50px;
  padding:10px;
  background-color:#f00;
  border: 2px solid #ff0;
}

inside of

.nav li a:hover #a{
     border: 2px solid #000;
}

or if i have multiple like

.nav li a:hover #a{
     border: 2px solid #000;
}
.nav li a:hover #b{
     border: 2px solid #000;
}
.nav li a:hover #c{
     border: 2px solid #000;
}

[jpistolas]

Not sure if this is what you’re asking for, but try this:
http://codepen.io/anon/pen/EaaGQw

[Doodayer]

ok closer, but what if there was a border surrounding the container. and then inside of each

.nav li a:hover#a {
     border: 2px solid #000;
}
.nav li a:hover#b {
     border: 2px solid #0f0;
}
.nav li a:hover#c {
     border: 2px solid #90f;
}

instead of changing their border, they changed their containers border

[Paulie_D]

Child elements cannot affect parent (container) elements in CSS.

For that you need javascript.

[Author]

Posts