EC-CUBE3で実現したかったこと。特定カテゴリーをトップページから非表示にしたい。おそらくプラグインでこれくらいのものは作れるだろうけど、開発になれていないのと開店まで時間がないのでCSSで処理。
方法
CSSパスを表示されるカテゴリ個別に指定してdisplay:noneを指定してやる。見た目は非表示になる。Firefoxブラウザで要素を右クリック＜要素を調査＜インスペクターが表示されるので、該当する要素を右クリック。コピー＜CSSパスで、まずパスをコピー。
html body#page_product_list.product_page div#wrapper header#header div.container-fluid.inner nav#category.drawer_block.pc ul.category-nav li a
疑似要素が入っているのでCSSセレクターで疑似クラスnth-childの要素（番号）を取得します。
ul.category-nav:nth-child(1) > li:nth-child(20) > a:nth-child(1)
この場合、li要素の擬似クラスの順番は20なので上のCSSパスに書き加えて個別の指定をします。
html body#page_homepage.front_page div#wrapper header#header div.container-fluid.inner nav#category.drawer_block.pc ul.category-nav li:nth-child(20) a:nth-child(1){display:none;}
これでできましたが、これではトップページのみ非表示となり、用を足しません。「html body#page_homepage.front_page 」部分が不要なので除きます。あと、これをCSSに書き加えてやると非表示に。カテゴリをいちいち作り直してIDも変えて…という無駄な手間が省けました。
出来上がりCSS
/* --------------------------------
個別カテゴリーの非表示2018.3.26
-------------------------------- */
/****** (全体の背景色) ********/
div#wrapper header#header div.container-fluid.inner nav#category.drawer_block.pc ul.category-nav li:nth-child(20) a:nth-child(1){display:none;}
参考
nth-child 疑似クラスは、要素を選択するパターンを表す引数を1つ取ります。
CSS の
:nth-child()疑似クラスは、兄弟要素のグループの中で1つまたは複数の要素を位置に基づいて選択します。/* 兄弟要素の中で3つおきに 要素を選択 */ :nth-child(4n) { color: lime; }セレクターの例
tr:nth-child(odd) または tr:nth-child(2n+1)
HTML テーブルの奇数行（1, 3, 5, など）を表します。
tr:nth-child(even) または tr:nth-child(2n)
HTML テーブルの偶数行（2, 4, 6, など）を表します。
:nth-child(7)
7番目の要素を表します。
:nth-child(5n)
5、10、15番目などの要素を表します。
:nth-child(3n+4)
4、7、10、13番目などの要素を表します。
:nth-child(-n+3)
兄弟要素のグループの中で最初の3つの要素を表します。
p:nth-child(n)
兄弟要素のグループの中ですべての要素を表します。これは単純な p セレクターと同じです。
p:nth-child(1) または p:nth-child(0n+1)
兄弟要素のグループの中で最初の要素すべてを表します。これは :first-child セレクターと同じです。