カスタムタグを工夫しCSSで要素を操作する

目的

変数タグを利用し、CSSで要素を操作する。
例えば、記事を表示した時、サイドバーのプロフィールを非表示とする。

HTML

HTMLに変数タグ{currentPageNumber}を値として追加する。
このタグは記事では使用できない。
この為、記事を表示した時、ページ番号とならず{currentPageNumber}のままとなる。

<div id="sub" class="sub" page={currentPageNumber}>
<div id="sub-inner" class="sub-inner">
<aside class="aside">
<div class="aside-inner">
<!--{include:widgets}-->
</div>
</aside>
</div>
</div>

CSS

サイドバーの値に{currentPageNumber}が含まれる時、プロフィールを非表示とする。

.sub[page*="currentPageNumber"] [data-part-type="profile"] {
display : none;
}
HTMLに変数タグを付加し工夫することで、CSSを用い条件に応じ要素を操作できる。