CodePen Embed - 何番目系の便利なCSSデモ ver2.0

<header>
  <ol>
    <li><label><input type="radio" name="type" checked>*:first-child</label></li>
    <li><label><input type="radio" name="type">*:first-of-type</label></li>
    <li><label><input type="radio" name="type">*:last-child</label></li>
    <li><label><input type="radio" name="type">*:last-of-type</label></li>
    <li><label><input type="radio" name="type">*:only-child</label></li>
    <li><label><input type="radio" name="type">*:only-of-type</label></li>
    <li><label><input type="radio" name="type">*:nth-child(5)</label></li>
    <li><label><input type="radio" name="type">*:nth-of-type(5)</label></li>
    <li><label><input type="radio" name="type">*:nth-last-child(5)</label></li>
    <li><label><input type="radio" name="type">*:nth-last-of-type(5)</label></li>
    <li><label><input type="radio" name="type">*:nth-child(n+5)</label></li>
    <li><label><input type="radio" name="type">*:nth-of-type(n+5)</label></li>
    <li><label><input type="radio" name="type">*:nth-child(-n+5)</label></li>
    <li><label><input type="radio" name="type">*:nth-of-type(-n+5)</label></li>
    <li><label><input type="radio" name="type">*:nth-last-child(-n+5)</label></li>
    <li><label><input type="radio" name="type">*:nth-last-of-type(-n+5)</label></li>
    <li><label><input type="radio" name="type">*:nth-last-child(n+5)</label></li>
    <li><label><input type="radio" name="type">*:nth-last-of-type(n+5)</label></li>
    <li><label><input type="radio" name="type">*:nth-child(2n)</label></li>
    <li><label><input type="radio" name="type">*:nth-of-type(2n)</label></li>
  </ol>
</header>

<section>
  <h1>h1</h1>
  <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    <li>06</li>
    <li>07</li>
    <li>08</li>
    <li>09</li>
    <li>10</li>
  </ul>
  <ul>
    <li>01</li>
  </ul>
  <p>p</p>
  <p>p</p>
  <p>p</p>
  <p>p</p>
  <p>p</p>
  <p>p</p>
  <p>p</p>
  <p>p</p>
  <p>p</p>
  <p>p</p>
  <dl>
    <dt>dt</dt>
    <dd>dd</dd>
  </dl>
</section>

$black-color: #BFBFBF;

body {
  background: #F5F5F5;
}
header {
  background: #16a6b6;
  ol {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 10px;
    list-style: none;
  }
  li {
    width: 50%;
  }
  label {
    display: block;
    padding: 5px;
  }
  input {
    margin: 0 5px 0 0;
    vertical-align: middle;
  }
}

section {
  > * {
    position: relative;
    margin: 3px;
    padding: 3px;
    background: #fff;
    border: 1px solid $black-color;
  }
  ul li,
  p {
    display: inline-block;
    padding: 3px;
    width: 1.5em;
    text-align: center;
    background: #fff;
    border: 1px solid $black-color;
  }
  > p {
    margin: 0;
  }
  p:first-of-type {
    margin-left: 3px;
  }
  dt,
  dd {
    padding: 3px;
    background: #fff;
    border: 1px solid $black-color;
  }
  dd {
    margin: 3px 0 0;
  }
  .active {
    border-color: #181818;
    background-color: #EE6557;
  }
}

View Compiled

var num,
    $ele = $('section');

$ele.find('*:first-child').addClass('active');

$('input[name=type]').change(function(){
    num = $('input[name=type]').index(this);
    
    switch(num){
        case 0:
            $ele.find('*').removeClass('active');
            $ele.find('*:first-child').addClass('active');
            break;
        case 1:
            $ele.find('*').removeClass('active');
            $ele.find('*:first-of-type').addClass('active');
            break;
        case 2:
            $ele.find('*').removeClass('active');
            $ele.find('*:last-child').addClass('active');
            break;
        case 3:
            $ele.find('*').removeClass('active');
            $ele.find('*:last-of-type').addClass('active');
            break;
        case 4:
            $ele.find('*').removeClass('active');
            $ele.find('*:only-child').addClass('active');
            break;
        case 5:
            $ele.find('*').removeClass('active');
            $ele.find('*:only-of-type').addClass('active');
            break;
        case 6:
            $ele.find('*').removeClass('active');
            $ele.find('*:nth-child(5)').addClass('active');
            break;
        case 7:
            $ele.find('*').removeClass('active');
            $ele.find('*:nth-of-type(5)').addClass('active');
            break;
        case 8:
            $ele.find('*').removeClass('active');
            $ele.find('*:nth-last-child(5)').addClass('active');
            break;
        case 9:
            $ele.find('*').removeClass('active');
            $ele.find('*:nth-last-of-type(5)').addClass('active');
            break;
        case 10:
            $ele.find('*').removeClass('active');
            $ele.find('*:nth-child(n+5)').addClass('active');
            break;
        case 11:
            $ele.find('*').removeClass('active');
            $ele.find('*:nth-of-type(n+5) ').addClass('active');
            break;
        case 12:
            $ele.find('*').removeClass('active');
            $ele.find('*:nth-child(-n+5)').addClass('active');
            break;
        case 13:
            $ele.find('*').removeClass('active');
            $ele.find('*:nth-of-type(-n+5)').addClass('active');
            break;
        case 14:
            $ele.find('*').removeClass('active');
            $ele.find('*:nth-last-child(-n+5)').addClass('active');
            break;
        case 15:
            $ele.find('*').removeClass('active');
            $ele.find('*:nth-last-of-type(-n+5)').addClass('active');
            break;
        case 16:
            $ele.find('*').removeClass('active');
            $ele.find('*:nth-last-child(n+5)').addClass('active');
            break;
        case 17:
            $ele.find('*').removeClass('active');
            $ele.find('*:nth-last-of-type(n+5)').addClass('active');
            break;
        case 18:
            $ele.find('*').removeClass('active');
            $ele.find('*:nth-child(2n)').addClass('active');
            break;
        case 19:
            $ele.find('*').removeClass('active');
            $ele.find('*:nth-of-type(2n)').addClass('active');
            break;
        default:
            $ele.find('*').removeClass('active');
            $ele.find('*:first-child').addClass('active');
    }
});

//パラメータの分割して、取得
function getUrlParam(param,url) {
	//URLを取得して「?]で分割「&」でも分割
	var params = url.split("?"),
		paramms = params[1] ? params[1].split("&") : '',
		paramArray = []; //パラメータ用の配列を用意
	
	//配列にパラメータを格納
	for ( i = 0; i < paramms.length; i++ ) {
		var arrayIndex = paramms[i].split("=");
		paramArray.push(arrayIndex[0]);
		paramArray[arrayIndex[0]] = arrayIndex[1];
	}
	return param +'='+ paramArray[param];
}

/* typeの内容によって表示を変更する */
var rep = getUrlParam('type',window.location.href);
if (rep && rep !== '') {
    var link = rep.replace("type=","");
    $('header li').eq(link).find('input').click();
}

This Pen is owned by ituki_b on CodePen.

See more by @ituki_b on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js