1

I am making navigation using Bootstrap 4 but got stuck here where I need those li items to adjust according to my needs in the navigation. I am not able to figure out how to select those li tags as it is nested in more than one classes. Though with some help from online I managed to figure out to select few classes but would be great if someone explains how to reach any class in CSS.

What should I do to select any classes in CSS? Also whats the best way to make a responsive website which is compatible with all the devices. I mean which technology is the best in 2018?

img {
    opacity: 0.7;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
img:hover {
    opacity: 1.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}



.navbar{
 background-color: black;
 
}

 .navbar-inverse{
  background-color: black;

 }

.navbar-fixed-top {
    min-height: 80px;
}


.navbar-nav > li > a {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 80px;
}


@media (max-width: 767px) {
    .navbar-nav > li > a {
    line-height: 20px;
    padding-top: 10px;
    padding-bottom: 10px;}
 }
]
<!DOCTYPE html>
<html lang="en">
<head>
  <title>PW</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="./CSS/pwCss.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>

 
</style>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <img class="img-fluid" src="./img/ani.png" alt="Logo" height="70">
    </div>
    <ul class="nav navbar-nav" style="font-size: large;">
      <li><a href="#">Home</a></li> 
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    
  </div>
</nav>

<div class="container">
  <h2>Rounded Corners</h2>
  <p>The .rounded class adds rounded corners to an image:</p>            
  <img src="./img/ani.PNG" class="rounded" alt="Cinque Terre" width="304" height="236"> 
</div>

<div class="container">
  
</div>

</body>
</html>
Sphinx
  • 10,519
  • 2
  • 27
  • 45
Aniruddhsingh Rathore
  • 271
  • 6
  • 23
  • 1
    *"What should I do to select any classes in CSS"* so you want to target `li` elements that might have multiple classes.... why not target the `li` tag in `css`. If you need to use more `li` elements but don't want the `css` to apply to those elements then write a class for them? **"Also"** Leads to a new question/problem *"which technology"* Honest answer.... experimenting and testing is the best way because you try/see multiple methods and learn how different browsers deal with HTML/CSS – NewToJS Apr 13 '18 at 01:01
  • Possible duplicate of [css selectors - wildcard *](https://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes) – RaphaMex Apr 13 '18 at 02:04
  • There is a syntax error at the end of your CSS file. ] – Daniel Tate Apr 13 '18 at 03:05

2 Answers2

2

If you want to target all li in the nav, then select elements, not classes:

nav ul li {
/* styles */
}

NOTE: there are no dots. Dots/periods are for classes, # is for id's. Elements don't get dots. E.g. body { background:#fff}

Because you may use a bulleted list in your content somewhere, specifying nav is important. Don't use the arrows in between unless you are being very specific.

Jason
  • 871
  • 1
  • 8
  • 18
  • Just an additional thought... CSS means cascading style sheets. The implication is that rules that occur farther down the cascade override other rules, so if you put this code at the top of your CSS file, subsequent rules may override, so be careful where you place it. Kind of hacky, but dropping rules in the footer in between some tags has saved me many times. – Jason Apr 13 '18 at 13:27
0

If I'm hearing you right, you want to style the <li> tags in a specific class.

To do so you want to do the following: 

.yourClass li {
    /* Your CSS Here! */
}

Notice you just add a space after your class and then li

And also delete square bracket at the end of your CSS code.

Trenton Adams
  • 44
  • 4