slickをCDNで読み込んだとき、CSSが変更されない

// sample.html
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="slide_parts">
  <img src="image1">
  <img src="image2">
  <img src="image3">  
</div>

// sample.css
.slide_parts{
  height: 100%;    // 適用された
  width: 80%;    // 適用された
}
.slick-prev,
.slick-next{
  color: red;    // 適用されない
}

// sample.js
$('.slide_parts').slick({
  dots: true,
  arrows: true,
  prevArrow:'<div class="slick-prev">PREV</div>',
});
$('.slick-prev').css('color','blue');    // 適用された

slickで生成された部分のデザインをcssファイルで変更したいです。スライドショー自体は動いているのでslickのプラグインはあっていると思いますが、デザインが変更できません。JQueryではcssをいじることはできましたが、cssファイルの方での変更ができません。cssをかくファイルが間違っているのでしょうか。
一通り調べたのですが、解決法が分かりません。助言をくださると助かります。

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

回答1件

ベストアンサー

こんばんは。
sample.cssの内容を拝見しました。
「PREV」の文字が赤くなっていれば成功という認識です。

◆確認できた問題点

. slick-prev:beforeの「.」とセレクターの間にスペースが空いている
「dots: ture,」スペルミスです。× ture　○true
prevArrow:'<div class="slick-prev">PREV</div>',としているのに、cssはbeforeを指定している。（正しくは .slick-prevを指定が正しいのではないでしょうか。）

テストしたhtmlを貼っておきます。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Document</title>
8  <!-- slickのCSS -->
9  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
10
11  <style>
12    .slide_parts{
13      height: 100%;
14      width: 80%;
15    }
16    .slick-prev,
17    .slick_next{
18      color: red;
19    }
20  </style>
21</head>
22<body>
23  <div class="slide_parts">
24    <img src="https://placehold.jp/300x150.png">
25    <img src="https://placehold.jp/300x150.png">
26    <img src="https://placehold.jp/300x150.png">  
27  </div>
28
29  <!-- jQuery と SlickのJS -->
30  <script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
31  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
32  <script>
33    // sample.js
34    $('.slide_parts').slick({
35      dots: true,
36      arrows: true,
37      prevArrow:'<div class="slick-prev">PREV</div>',
38    });
39  </script>
40</body>
41</html>