How to Remove a Specific Bullet Point Within a Ul in CSS

How do I remove a specific bullet point within a ul in CSS?

jsFiddle here.

You can use the nth-child selector to achieve this.

li:nth-child(6) {
   list-style-type: none; 
}

Edit:

It now seems you want to hide it for the last child, you can use the last-child selector instead:

New jsFiddle here.

li:last-child {
   list-style-type: none; 
}

If you'd like to get either of these working in IE6-8, you could use Selectivizr.

"Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes
and attribute selectors in Internet Explorer 6-8"

nth-child and last-child are some of those supported selectors in Selectivizr.

Remove bullet points in UL in CSS

#menu-bar ul will only target the ul which is a direct child of #menu-bar, the style wont propagate to nested ul's within.

To target the nested ul you can either target it directly by it's class:

.noJS {
    list-style:outside none none;
}

or by drilling into the nested structure:

#menu-bar ul li ul {
    list-style:outside none none;
}

How to remove bullets from Unordered list nested in Div's?

Maybe your browser is cached, try using control+shift+R on the page you are using, your code is fine here

*{
margin: 0;
padding: 0;
box-sizing: border-box;}

body{
    height: 100%;
}

.nav-wrapper{
    display: grid;
    grid-template-columns: repeat(6, 1);
    grid-template-rows: 8;

height: 100px;
width: 900px;}

ul { list-style: none;}

<div class="nav-wrapper">
    <div class="logo">
        <!-- <a href="/">Logo</a> -->
    </div>
    <div class="main-page-links">
        <ul>
            <li><a href="">MENU</a></li>
            <li><a href="">WEEKLY EVENTS</a></li>
            <li><a href="">FILLER</a></li>
            <li><a href="">FILLER</a></li>
        </ul>
    </div>
    <div class="gallery">
        <img src="" alt="image galleries">
    </div>

</div>

I need an unordered list without any bullets

You can remove bullets by setting the list-style-type to none on the CSS for the parent element (typically a <ul>), for example:

ul {
  list-style-type: none;
}

You might also want to add padding: 0 and margin: 0 to that if you want to remove indentation as well.

See Listutorial for a great walkthrough of list formatting techniques.

Remove bullets from ul ?

#menu ul is trying to target a ul that is a descendant of #menu. This is incorrect, since in your case they are the same element. ul#menu would be correct.

Removing bullets from unordered list ul

ul.menu li a:before, ul.menu li .item:before, ul.menu li .separator:before {
  content: "\2022";
  font-family: FontAwesome;
  margin-right: 10px;
  display: inline;
  vertical-align: middle;
  font-size: 1.6em;
  font-weight: normal;
}

Is present in your site's CSS, looks like it's coming from a compiled CSS file from within your application. Perhaps from a plugin. Changing the name of the "menu" class you are using should resolve the issue.

Visual for you - http://i.imgur.com/d533SQD.png

How can I remove bullets from html list without losing other formatting?

As Thomas L. mentioned in the comments, you can add a CSS style component to your code to hide the bullet points that are being created for the li tags.

So in each of your li tags you would change them like so:

<li style="list-style: none">

Here is your modified code:

.link-container {
    background-color: #4e4e4e91;
    border-color:rgba(129, 191, 235, 0.978);
    border-width: 1px;
    border-style: solid;
    height: 50%;
    border: 2px solid rgba(129, 191, 235, 0.978) ;
    border-radius: 30px;

    }

        .links {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 100px;
            margin-right: 100px;
        }

        a {
            color: rgb(245, 245, 245);
            text-decoration: none;
            font-weight: bold; 
            border: 1px solid ;
            background: 0;
            font-weight: 600;
            border-radius: 40px;
          
    
    padding: 0 10px;   
        }
        
        a:hover{
            
            color: rgb(129, 191, 235)
            
            
        }

        .input-box {
            background-color: white;
            color: gb(129, 191, 235);
        }

<div>
    <div class= "link-container">
      <h6 class="links">
        
     <li style="list-style: none">
         <a href="https://www.visitberlin.de/de/sehenswuerdigkeiten-berlin" class="linkButton.clearbutton" itemprop="possibilities"> Sehenswürdigkeiten</a>
     </li>

     <li style="list-style: none"> 
            <a href="https://service.berlin.de/behoerden/" class="linkButton.clearbutton" 
            itemprop="possibilities">Behörden </a>
     </li>

    <li style="list-style: none">
        <a href="https://www.berlin.de/clubs-und-party/clubguide/a-z/" class="linkButton.clearbutton"
        itemprop="possibilities">Clubs</a>
     </li>

    <li style="list-style: none">
        <a href="https://www.berlin.de/tourismus/parks-und-gaerten/" class="linkButton.clearbutton" 
        >Parks</a>
     </li>

     <li style="list-style: none">
        <a href="https://www.berlin.de/stadtplan/" class="linkButton.clearbutton"
        itemprop="possibilities" >Stadtkarte</a>
    </li>
      </h6>
      </div>
</div>

Removing black dots from li and ul

Relatable post

Those black dots you are referencing to are called bullets.

They are pretty simple to remove, just add this line to your css:

ul {
    list-style-type: none;
}

Removing ul bullets via CSS

Here is some jQuery which will remove the bullet for you:

$(document).ready(function(){
     $('ul.viewsCycle-processed').css({background:'transparent'}).find('> li').css({background:'transparent'});
});

And if you want to add a css stylesheet to the page:

ul.viewsCycle-processed { background:transparent !important; }
ul.viewsCycle-processed li { background:transparent !important; }