Slick Sliderでnth-childやfirst-childなどが効かない時

結論から言えば、あきらめます。スライダーが複製カルーセルタイプになると、タグ階層や疑似クラスが固定でなくなります。

 

親要素から指定の子要素だけにCSSスタイルを適用したいときに、指定する疑似クラスだnth-childやfirst-oft-typeを使いこなせるようになると、nth-childが効かないときは、階層指定などが間違ってたりすることがあり、指定階層を変更したりすることで回避可能です。

ただ指定はスライドが複製配置される場合は、指定できないと考えた方がいいでしょう。

 

JQueryプラグインなどを使用したときにも、疑似クラスを使用したりできますが、Slick Sliderを使用時にどうやっても指定ができない状況に陥りました。

SlickSliderはスライダー用のライブラリーでわりと使いやすいです。

 

Slickでセレクタを指定したタイミングで疑似クラスが効かなくなるので、JQueryで余分なセレクタが指定されて、nth-childなどの疑似クラスが無効化されているようでした。

 

結論は、Slick Sliderはスライド子要素に.slick-slideというセレクタやDIVタグを複数あてがうように構造化されているので、固定スライド子要素のオリジナルCSSが効かなくなります。

独自に作成した孫要素内のCSS指定なのに、なぜか疑似要素がすべての子要素に適用されていたので、調べてみましたが、見事に複数のDIVタグ階層が追加されていて、スライダーを使用するうえで、これらの構造を変更することはほぼ困難(カスタムするほどの有用性がまったく見当たらない)なため、スライド子要素に直接指定するようにしました。