Ngx-Pagination change default blue color to other color

I am using ngx-pagination in Angular 16 application and I want to customize the default blue color into another , Can anyone help me.

Html code:

<div>
  <pagination-controls></pagination-controls>                       
</div>

CSS

.ngx-pagination .current{
  color: #ffffff !important;
  background-color: red !important;
}

Tried with above and similar css, it do not works.

Any help will be appreciated.

Try these changes ,

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

/* Change the background color of the current page */
.pagination-current {
  background-color: red !important;
}

/* Change the text color of the current page */
.pagination-current a {
  color: #ffffff !important;
}

/* Change the background color of the page buttons */
.pagination-controls button {
  background-color: red !important;
}

<!-- end snippet -->

If it is not working means , I want to Inspect your line of code further more

It worked after below changes.

HTML

<pagination-controls class="my-pagination"><pagination-controls>

CSS

.my-pagination ::ng-deep .ngx-pagination .current {
    background: red;
  }

Your code is correct, and it should work. The only thing you need to ensure is that you place the CSS class correctly. It should not be at the component level where you are using ngx-pagination.

You have two options for placing the CSS class correctly:

Add the CSS class to the style.css file: You can add the following code to the style.css file in your Angular project:

.ngx-pagination .current {
  color: #ffffff !important;
  background-color: red !important;
}

Or create new file and import into style.css like this.

@import 'path/to/pagination-customization.css';

there is oficial live demo with my changes in style.css have a look pls.

https://angular-zgr18t.stackblitz.io