Ron Ron - 4 months ago 10
HTML Question

Bootstrap: Is it possible to define two types of links?

With Bootstrap (not sure that matters in this case), is it possible to have multiple definitions for CSS elements? For instance, if I have a class, .menu, I have tried to have .menu:a for its own link, but the style for link overrides this.

What I want is the Menu1's across the top to be white text on a black background, except when hovered over and clicked.

But the button should look as it does now. Is this possible?

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style>
.btn-background
{
color:red;
}
.btn-background:a:link
{
/*shouldn't this determine how a button's link looks? */
color:red;
}

.menuBackground {
background-color: rgb(0,0,0);
color:white;

body {
font-family: 'Open Sans', 'Arial', sans-serif;
}
.view {
margin-left: auto;
margin-right: auto;
overflow: hidden;
margin-top: 3px;
}
a:link {
background-color: rgb(0,0,0);
color:white;
text-decoration: none;
}
a:visited {
background-color: rgb(0,0,0);
color:white;
text-decoration: none;
}

a:hover {
color: white; background-color: red;
text-decoration: none;
}

a:active {
background-color: red;
color:white;
}
.menuFont {
font-size:large;
}
.Regular {
.lead;
}
.footerFont {
font-size:small;
}
h1 {
letter-spacing: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="Jumbotron">
<h1 class="text-primary text-center">TEST PROGRAM</led></h1>
<hr>
</div>
<nav class="navbar navbar-default view menuBackground">
<div class="container-fluid view">
<div class="row">
<div class="col-lg-10 col-lg-offset-10 view" >
<ul class="list-inline view linkz" >
<li class="menuFont view"><a href="/">Menu1</a></li>
<li class="menuFont view"><a href="/Menu">Menu1</a></li>
<li class="menuFont view"><a href="/Menu">Menu1</a></li></li>
<li class="menuFont view"><a href="/Menu">Menu1</a></li>
<li class="menuFont view"><a href="/Menu">Menu1</a></li>
<li class="menuFont view"><a href="/Menu">Menu1</a></li>
<li class="menuFont view"><a href="/Menu">Menu1</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div>


<h4>What is Lorem Ipsum?</h4>
<p class="Regular ">Lorem ipsum dolor sit amet, risus libero justo, sed pellentesque, fringilla in at euismod cras turpis nonummy, phasellus ut vitae, nibh nibh aliquam. Ut parturient amet dui, nulla nec urna arcu eu laoreet. Arcu sed nulla erat turpis, sapien phasellus morbi ac, leo sit, condimentum erat ut massa sociosqu excepteur. Condimentum mi. Molestie porta dolor, ex purus enim in leo lectus eros, dolore aliquet massa. Vestibulum risus, elit sem mauris eros. Aenean tortor. Dui class aliquam dolor nullam sapien arcu. Rutrum nulla etiam dictum wisi a, aperiam non sapien, mauris vitae metus integer non. Urna pellentesque aliquet magna enim, praesent fusce. Feugiat mauris, nullam dignissim adipiscing molestie erat imperdiet, tempor in nisl vel, quam pellentesque enim nulla eaque, ut integer magna nisl imperdiet ante ullamcorper. Orci eu sodales, wisi malesuada.</p>

<button type="button" class="btn-background" role="button">
<code><a href="\data\download\yull-reg.exe">Yull-Reg.exe</a></code>
</button></p>


The menu links at the top are wrong. They should not be blue. I defined a btn-background link just to have a btn-background:link:a style but that doesn't seem to work. The button is just fine; how can the Menu links at the top be governed by a different style?

Here is how it looks. Menu1 is correct. The rest are not. When hovered over they are correct.

enter image description here

Answer

use !importnat after any style you want to clear from the other css file example

.menuBackground { 
  background-color: rgb(0,0,0) !importnat;
  color:white !importnat;}

and for .menu:a

you must type it like this

.menu a{}
Comments