トップページで複数のカテゴリを表示させたい

参考サイト
のようにトップページに複数のカテゴリを表示させたいと考えています。

私は、Category Posts Widgetを利用し、各カテゴリーごとに配列し、その上でコーディングを勧めようと思っておりましたところ、
単純に横並びは可能なのですが、細かな表現をするためには、classもしくは、idを使いたいと思いました。
どうやって設定すればいいのか調べましたが、見つからず、困っております。

どなたか教えていただけませんでしょうか？

何卒よろしくお願いいたします。

akihiro3

2020/08/20 06:48

表示はできているという事ですか？横並びを変えたいという事ですか？

julie

2020/08/20 07:50

すでに、横並びで表示はできております。 classやidをつけることは難しいでしょうか？

julie

2020/08/20 07:57

あと、このプラグインは通常は、縦並びに記事を表示します。

akihiro3

2020/08/20 08:35

表示できている事分かりました。では、通常縦並びなのに、現状は横並びなのは何故ですか？そのように変更したのですか？

julie

2020/08/20 08:43

？cssで特定の箇所に以下の記述を行い実現しました。 .widget ul｛width: 100%; display: flex; flex-wrap: wrap;} ただ、これでは横並びに表示されるのみなので、classやidを利用し、もっと詳細にデザインをつけたいという希望があり、質問させいただきました。

akihiro3

2020/08/20 09:27 編集

ありがとうございます。 cssで並び替える方法は知っているという事ですね。 classの付与方法が分からないという事ですか？ちなみに、プラグインによって既にclassやidが付いていませんか？

julie

2020/08/21 00:55

cat-post-itemというclassは自動的についてはいますが、ただ、全ての投稿にcat-post-itemという同一のClassなので、数を変えたり等の作業が出来ません。

akihiro3

2020/08/24 01:54

では、.cat-post-itemは兄弟要素ですか？

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

回答1件

ベストアンサー

兄弟要素ならcssで:nth-child、
違うならforEachで回してclass付与してください

参考

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<title>sample</title>
6	<style>
7	.cat-post-item:nth-child(2) {
8		background: #f00;
9	}
10</style>
11</head>
12<body>
13	<div class="box">
14		<div class="cat-post-item">
15			<p>aaa</p>
16		</div>
17		<div class="cat-post-item">
18			<p>aaa</p>
19		</div>
20		<div>
21			孫
22			<div class="cat-post-item">
23				<p>aaa</p>
24			</div>
25		</div>
26		<div class="cat-post-item">
27			<p>aaa</p>
28		</div>
29	</div>
30	<script>
31	(() => {
32		const item = document.querySelectorAll('.cat-post-item');
33		item.forEach((e,i) => {
34			e.classList.add(`item_${i}`);
35		});
36	})();
37</script>
38</body>
39</html>
40