都度、ランダムで画像を表示するものをcssのみ、又はjsを使用して

前提・実現したいこと

cssのみで、又はjavascript使用してですが、
class photoの画像を、ランダムで一つ表示するものを作成したいです。
（ローテーションは無し）

乱数を使って、表示画像を指定するのが良いのかと思って
(int 0^1の乱数*画像枚数)を　.photo-show img:nth-of-type(　ここ　)
（　ここ　）にあてはめようと思ったのですが、これで出来るのでしょうか？
またそのあとがどうすれば良いか悩んでしまってます。よろしくお願いします。

該当のソースコード

html
1<div class="photo">
2    <img src="画像のURL">
3    <img src="画像のURL">
4    <img src="画像のURL">
5    <img src="画像のURL">
6    <img src="画像のURL">
7    <img src="画像のURL">
8    <img src="画像のURL">
9    <img src="画像のURL">
10</div>

css
1
2.photo-show img:nth-of-type( ここ ) {
3    
4}

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

回答1件

ベストアンサー

乱数を使って、表示画像を指定するのが良いのかと思って

CSSには乱数機能がありません（SCSSにはありますが、それもコンパイル時に1度実行されるだけなので、「アクセスごとに変えたい」という用途には向きません）。JavaScriptを使いましょう。

css
1.photo img{ display: none; }

javascript
1// .photoは1つだけ、という前提です
2document.addEventListener("DOMContentLoaded", function(){
3  var images = document.querySelectorAll('.photo img');
4  var index = Math.floor(Math.random() * images.length);
5  images[index].style.display = 'inline-block';
6}, false);