質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

ページネーション

Webアプリケーションにおいて、1ページに収まらないコンテンツを、各ページへのリンクを並べてアクセスしやすくする手法をページネーションと呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

受付中

ページネーションのデザインで、表示しているページ番号の色が変わらない。

reol-777
reol-777

総合スコア14

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

ページネーション

Webアプリケーションにおいて、1ページに収まらないコンテンツを、各ページへのリンクを並べてアクセスしやすくする手法をページネーションと呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0回答

0グッド

0クリップ

573閲覧

投稿2021/01/05 09:40

編集2021/01/08 13:36

ページネーションで、表示しているページ番号の色を変えたいのですが、デフォルトから変わりません。使っているブラウザはchromeです。ページ更新や、Ctrl + F5でキャッシュをクリアしてもダメでした
イメージ説明

pagination

1{% load static %} 2{% block customcss %} 3 <link rel='stylesheet' href="{% static 'css/style.css' %}"> 4 <link rel='stylesheet' href="{% static 'css/page.css' %}"> 5{% endblock customcss %} 6 7<div class="page"> 8 <ul class="pagination"> 9 <!-- 前へ の部分 --> 10 {% if page_obj.has_previous %} 11 <li class="page-item"> 12 <a class="page-link" href="?page={{ page_obj.previous_page_number }}"> 13 <span aria-hidden="true">&laquo;</span> 14 </a> 15 </li> 16 {% else %} 17 <li class="page-item"> 18 <a class="page-link" href="#"> 19 <span aria-hidden="true">&laquo;</span> 20 </a> 21 </li> 22 {% endif %} 23 24 <!-- 数字の部分 --> 25 {% for num in page_obj.paginator.page_range %} 26 {% if page_obj.number == num %} 27 <li class="page-item active"><a class="page-link" href="#!">{{ num }}</a></li> 28 {% else %} 29 <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li> 30 {% endif %} 31 {% endfor %} 32 33 <!-- 次へ の部分 --> 34 {% if page_obj.has_next %} 35 <li class="page-item"> 36 <a class="page-link" href="?page={{ page_obj.next_page_number }}"> 37 <span aria-hidden="true">&raquo;</span> 38 </a> 39 </li> 40 {% else %} 41 <li class="page-item"> 42 <a class="page-link" href="#"> 43 <span aria-hidden="true">&raquo;</span> 44 </a> 45 </li> 46 {% endif %} 47 </ul> 48</div> 49

css

1.pagination li a{ 2 border:none; 3 color:#696969; 4 margin-left:10px; 5} 6 7.pagination li a:hover{ 8 border-radius: 50%; 9} 10 11.pagination>.active>a { 12 background-color: red; 13 border-radius: 50%; 14} 15

cssの
.pagination>.active>a {
background-color: red;
border-radius: 50%;
}
の部分に表示しているページ番号の色を変えるように書いています。セレクタの指定の方法が間違っているのでしょうか?しかしborder-radius: 50%;はうまくいきました。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

Lhankor_Mhy

2021/01/05 10:05

問題が再現しませんでした。 ご提示いただいていない部分のコードが原因かもしれません。
reol-777

2021/01/05 12:55

htmlの <li class="page-item active"><a class="page-link" href="#!">{{ num }}</a></li>のclass="page-link"を削除した結果、形は崩れましたが、色は正しく指定したとおりになりました。恐らく、別に定義された、background-colorが優先され、正しく表示されなかったのだと思います。原因は分かったのですが、class="page-link"にあらかじめ書かれているcssは恐らく、bootstrap側?で定義されているため、変更の仕方がわかりません。上書きするみたいなことはできないのでしょうか?

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

ページネーション

Webアプリケーションにおいて、1ページに収まらないコンテンツを、各ページへのリンクを並べてアクセスしやすくする手法をページネーションと呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。