<!-- ユニークなIDとクラスを持つ要素 -->
<div id="unique-element" class="common-style highlight">
    この要素はユニークなid「unique-element」とクラス「common-style」「highlight」を持っています。
</div>

<!-- 共通のスタイルのみを持つ要素 -->
<div class="common-style">
    この要素は共通のスタイル「common-style」のみを持っています。
</div>

<!-- 共通のスタイルと強調表示のスタイルを持つ要素 -->
<div class="common-style highlight">
    この要素は共通のスタイル「common-style」と強調表示のスタイル「highlight」を持っています。
</div>

/* ユニークなIDを持つ要素のスタイル */
#unique-element {
    background-color: #f0f0f0;
    padding: 20px;
    margin-bottom: 20px;
}

/* 複数の要素に適用される共通スタイル */
.common-style {
    font-size: 16px;
    line-height: 1.5;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
}

/* 強調表示のスタイル */
.highlight {
    color: #ff0000;
    font-weight: bold;
    border-color: #ff0000;
}

// id属性を使用して特定の要素にスタイルを動的に適用
const uniqueElement = document.getElementById('unique-element');
uniqueElement.style.backgroundColor = '#dff0d8';  // 背景色を変更

// class属性を使用して、共通のスタイルを持つ複数の要素に対して操作を実行
const commonElements = document.getElementsByClassName('common-style');
for (let element of commonElements) {
    element.style.borderWidth = '2px';  // ボーダーの幅を変更
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.