cssとjQueryの優先順位についての質問です。

現在は、cssよりもjQueryの方が優先順位が高いです。
なのに、「index-btn」を押した時に「前へ」と「次へ」の両方のボタンが現れるという記述よりも、cssでの.prev-btn{display:none}の方が優先されるのは何故ですか？
二つ目のスライドが表示されている段階でindex-btnを押したら、「前へ」も「次へ」も両方表示されるはずではないでしょうか？
実際は、cssでの.prev-btn{display:none}の方が適用されます。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>Progate</title>
6    <link rel="stylesheet" href="stylesheet.css">
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
8  </head>
9  <body>
10    <div class="slide-wrapper">
11      <h2 class="slide-title">にんじゃわんこの一年</h2>
12        <div class="change-btn-wrapper">
13          <div class="change-btn prev-btn">← 前へ</div>
14          <div class="change-btn next-btn">次へ →</div>
15        </div>
16        <ul class="slides">
17          <li class="slide active"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"></li>
18          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"></li>
19          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"></li>
20          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"></li>
21        </ul>
22        <div class="index-btn-wrapper">
23          <div class="index-btn">1</div>
24          <div class="index-btn">2</div>
25          <div class="index-btn">3</div>
26          <div class="index-btn">4</div>  
27        </div>
28      </div>
29    <script type="text/javascript" src="script.js"></script>
30  </body>
31</html>

css
1body {
2  font-family: "Hiragino Maru Gothic ProN", sans-serif;
3}
4
5ul {
6  list-style: none;
7}
8
9.slide-wrapper {
10  text-align: center;
11  width: 1000px;
12  margin: 0 auto;
13  color: #5e6f84;
14  padding: 60px 0;
15}
16
17.slide-title {
18  font-size: 40px;
19  margin-bottom: 30px;
20}
21
22.change-btn-wrapper {
23  width: 500px;
24  margin: 20px auto;
25  font-size: 18px;
26}
27
28.change-btn-wrapper:after {
29  content: "";
30  clear: both;
31  display: block;
32}
33
34.prev-btn {
35  cursor: pointer;
36  float: left;
37  /* 初期状態では非表示にしてください */
38  display:none;
39  
40}
41
42.next-btn {
43  cursor: pointer;
44  float: right;
45}
46
47.slides {
48  padding: 0;
49}
50
51.slide {
52  display: none;
53}
54
55.active {
56  display: block;
57}
58
59.slide img {
60  width: 500px;
61  height: auto;
62  border-radius: 5px;
63}
64
65.index-btn-wrapper {
66  font-size: 16px;
67  margin-top: 20px;
68}
69
70.index-btn {
71  display: inline-block;
72  color: #4e90af;
73  background-color: #e0f5ff;
74  width: 40px;
75  padding: 6px 0;
76  margin: 0 5px;
77  border-radius: 3px;
78  cursor: pointer;
79}
80
81.index-btn:hover {
82  color: #fff;
83  background-color: #5cabd0;
84}

jQuery
1$(function() {
2  $('.index-btn').click(function() {
3    $('.active').removeClass('active');
4    var clickedIndex = $('.index-btn').index($(this));
5    $('.slide').eq(clickedIndex).addClass('active');
6    
7    // 1. 変数slideIndexに「.active」要素のインデックス番号を代入してください
8    var slideIndex=$('.slide').index($('.active'));
9    
10    // 3. change-btn要素を表示してください
11    $('.change-btn').show();
12    
13    // 2. ifとelse ifを用いて、「.change-btn」の表示/非表示をおこなってください
14    if(slideIndex==0){
15      $('.prev-btn').hide();
16    } else if(slideIndex==3){
17      $('.next-btn').hide();
18    }
19  });
20  
21  $('.change-btn').click(function() {
22    var $displaySlide = $('.active');
23    $displaySlide.removeClass('active');
24    if ($(this).hasClass('next-btn')) {
25      $displaySlide.next().addClass('active');
26    } else {
27      $displaySlide.prev().addClass('active');
28    }
29    
30    // 「.index-btn」のクリックイベントと同様の処理を記述してください
31    
32    
33  });
34});
35

maisumakun

2020/02/03 11:41

「現在は、cssよりもjQueryの方が優先順位が高いです。」とありますが、何についてそう表現しているのでしょうか。（本来、CSSとjQueryは別個のものです）

reo_fukkase

2020/02/03 11:43

htmlのheadに書いた順序からこの優先順序なのかなと思いました

行動規範の内容に同意します

回答2件

htmlのheadに書いた順序からこの優先順序なのかなと思いました

そんなことはありません。JavaScriptでクラスを操作した場合、実際に付与されたクラスに従ってCSSのルール通りにスタイルが適用されます。

投稿2020/02/03 11:45

maisumakun

総合スコア145184

reo_fukkase

2020/02/03 11:48

つまり、二枚目のスライドの画面でindex-btnを押しても「$('.change-btn').show();」が適用されないのは何故でしょうか？

maisumakun

2020/02/03 11:51

> つまり、二枚目のスライドの画面でindex-btnを押しても「$('.change-btn').show();」が適用されないのは何故でしょうか？再現しません（きちんと表示されています）。 https://jsfiddle.net/9rxz2cqk/

reo_fukkase

2020/02/03 11:52

すみません、理解しました。 if(slideIndex==0){ $('.prev-btn').hide(); } else if(slideIndex==3){ $('.next-btn').hide(); }がありました

reo_fukkase

2020/02/04 06:12

そんなことはありません。JavaScriptでクラスを操作した場合、実際に付与されたクラスに従ってCSSのルール通りにスタイルが適用されます。→それでは、例えばcssでは青色にしていた箇所を、jQueryのほうでそのcssを赤色に指定したら、赤色になりますよね。これは、jQueryがcssより優先度が高い、とは言わないですか？

maisumakun

2020/02/04 06:20 編集

> これは、jQueryがcssより優先度が高い、とは言わないですか？もとの主張は、「クラスを操作した場合」限定の話です。 .cssなどで要素単位のスタイルを書き換えた場合は、（元のCSSに!importantがかかっている場合を除いて）要素単位のスタイルが優先されます。

maisumakun

2020/02/04 06:22 編集

「順番が先にあるから」優先して適用されるわけではない、というのは、直接書き換えた場合も共通します。

行動規範の内容に同意します

自己解決

初めの画面ではprevにdisplay:noneがついているので、「前へ」がない状態
index-btnを押すと、「前へ」も「次へ」も表示される
それに加えて、１番を押した時には「前へ」が消え、４番を押した時には「次へ」が消されるという記述があるので、２つ目のスライドの画面で１番を押した時に、「前へ」を「次へ」の両方が表示されることはない。

投稿2020/02/03 12:06

reo_fukkase

総合スコア50