Web Design Leaves

h3 { font-style: italic; }  /*全ての h3 要素の文字をイタリックに指定 */

* { color: #000; } /* 全ての要素の文字色を #000 に指定 */

div.side { font-size: 12px; }
/* クラス属性が side の div 要素のフォントサイズを12pxに指定 */

ul#navi { padding: 10px; }
/* id 属性が navi の ul 要素のパディングを10pxに指定 */

div a { font-size: 120%; }
/* div 要素の子孫要素である a 要素の文字サイズを120% にする */

<div>
  <p><a>link </a></p>
</div>

<div>
  <ul>
    <li><a>link</a></li>
  </ul>
</div>

li > strong { color: red; }
/* li 要素の直接の子要素である strong 要素の文字色を赤にします。 */

<ul>
  <li><strong>text1</strong></li>
  <li>text2</li>
  <li>
    <div><strong>text3</strong></div>
  </li>
</ul>

h2 + p { margin-top: 50px; }

<h2>Adjacent Sibling Selector</h2>
<p> １番目<!-- 適用 --><p>
<p> ２番目<!-- 対象外 --><p>

p + ol {
  margin-top: 3em;
}

<p>テキスト</p>
<ol><!-- 適用 -->
  <li>p 要素に隣接している ol 要素</li>
</ol>
<p>テキスト</p>
<h3>見出し</h3>
<ol><!-- 対象外 -->
  <li>h3 要素が間に入っているため適用されない。</li>
</ol>
<p>テキスト</p>

dt + dd { font-size: 150%; } 

<dl>
  <dt>dt 要素</dt>
  <dd>直後に出現する dd 要素<!-- 適用 --></dd>
  <dd>dd 要素<!-- 対象外 --></dd>
  <dt>dt 要素</dt>
  <dd>直後に出現する dd 要素<!-- 適用 --></dd>
  <dd>dd 要素<!-- 対象外 --></dd>
</dl>

p ~ span { color: red; }

<div>
  <span>赤ではありません。</span>
  <p>パラグラフです。</p>
  <h3>見出しです。</h3>
  <span>赤く表示されます。</span><!-- 適用 -->
  <h4>見出しです。</h4>
  <span>赤く表示されます。</span> <!-- 適用 -->
</div>

h3 {
  margin-top: 20px;
}
h3 ~ h3 {
  margin-top: 60px;
}

<div>
  <h3>間接セレクタ</h3>
  <h4>別名：一般兄弟セレクタ</h4>
  <p>「~」結合子を使います。</p>
  <h3>構文</h3> <!-- 適用 -->
  <p>element ~ element { style properties }</p>
  <h3>ブラウザ実装状況</h3> <!-- 適用 -->
  <p>IE は ７ 以降サポートされています。</p>
  <div>
    <h3>仕様書</h3><!-- 対象外 -->
    <p>CSS Selectors Level 3</p>
  </div>
  <h3>関連情報 </h3><!-- 適用 -->
  <p>隣接セレクタ</p>
</div>

p[title] { color: blue; }

a[href][target] { background-color: #EFEFEF; }

<style>
h3[title] {
  color : blue;
}
</style>

<h3>適用されない（対象外）<h3>
<h3 title="タイトル">適用される<h3> 

<style>
h3[title="foo"] {
  color : red;
}
</style>

<h3 title="foo">適用される<h3>
<h3 title="bar">適用されない（対象外）<h3>

<style>
p[class~="bar"] {
  color : green;
}
</style>

<p class="foo bar">適用される</p>
<p class="foobar foo">適用されない（対象外）</p>
<p class="bar">適用される</p> 

<style type="text/css">
p[lang|="en"] {
  background-color: #6EB3E5;
}
</style>

<p lang="en">適用される</p>
<p lang="ja">適用されない（対象外）</p>
<p lang="en-US">適用される</p>  

a:link { /*未訪問のリンク*/
  color: blue;
  text-decoration: none;
}

a:visited { /*訪問済みリンク*/
  color: green;
  text-decoration: none;
}

a:hover { /*カーソルが重なった時*/
  color: orange;
  text-decoration: underline;
}

a:active { /*アクティブ時（クリックした時）*/
  color: red;
  text-decoration: underline;
}

<style>
div.cool p:first-child {
  color: orange;
}
</style>

<div class="cool">
<p>Text </p><!-- 適用される -->
<p>Text </p><!-- 対象外 -->
</div>

<div class="cool">
<h3>Title</h3>
<p>Text </p><!-- 対象外 -->
</div>  

:root {
  background-color:#efefef;
}

ul li:last-child {
  color: orange;
}
p span:last-child {
  color: green;
}

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li><!-- 適用される -->
</ul>

<p>ある<span>要素内</span>で最後に書かれている<span>子要素</span>にスタイルが適用されます。</p>

ul li:nth-child(4) {
  color: red;
}

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li><!-- 適用される -->
  <li>item5</li>
</ul>

p:nth-child(5) {
  color: red;
}

<div>
  <p>paragraph 1</p>
  <p>paragraph 2</p>
  <p>paragraph 3</p>
  <h3>heading 1</h3>
  <p>paragraph 4</p><!-- 適用される -->
</div>

nth-child(2n+1)
nth-child(odd)

nth-child(2n)
nth-child(2n+2)
nth-child(even)

.psc_01 li:nth-child(odd) {
  background-color: #F7C8C8;
}
.psc_01 li:nth-child(even) {
  background-color: #B4EFF7;
}

<ul class="psc_01">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>

<ul class="psc_01">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul> 

.psc_02 li:nth-child(3n+1) {
  background-color: #F2F5D5;
}
.psc_02 li:nth-child(3n+2) {
  background-color: #CEF5D4;
}
.psc_02 li:nth-child(3n+3) {
  background-color: #BBE8F5;
}

<ul class="psc_02">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>

.psc_03 li:nth-child(-n+4) {
  background-color: #EEAAFB;
}

<ul class="psc_03">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>

.psc_04 li:first-child:last-child {
  background-color: #76E079;
}

<ul class="psc_04">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

<ul class="psc_04">
  <li>item1</li>
</ul>

.psc_05 li:nth-last-child(5) {
  color: red;
}

<ul class="psc_05">
  <li>item1</li>
  <li>item2</li><!-- 適用される -->
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>

.psc_06 li:nth-last-child(-n+2) {
  background-color: #EEAAFB;
}

<ul class="psc_06">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>

.psc_07 dt:first-of-type {
  border-top: 5px groove #6596C4;
  padding-top: 10px;
}

<dl class="psc_07">
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>XML</dt>
  <dd>Extensible Markup Language</dd>
</dl>

<dl class="psc_07">
  <dt>PHP</dt>
  <dd>PHP: Hypertext Preprocessor</dd>
  <dt>Ajax</dt>
  <dd>Asynchronous JavaScript + XML</dd>
  <dt>HTTP</dt>
  <dd>Hypertext Transfer Protocol</dd>
</dl>

.psc_07_2 li {
  border-top: 1px solid #577BA6;
  list-style-type: none;
  padding: 5px 10px;
  width:  120px;
}

.psc_07_2 li:first-of-type {
  border-top: none;
}

<ul class="psc_07_2">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul> 

.psc_08 p:last-of-type {
  color: orange;
}

<div class="psc_08">
  <p>paragraph 1</p>
  <p>paragraph 2</p>
  <p>paragraph 3</p>
</div>

.psc_09 h4:nth-child(odd) {
  background-color: orange;
}
.psc_09 h4:nth-child(even) {
  background-color: lightgreen;
}

<div class="psc_09">
  <h4>Heading 1</h4>
  <p>paragraph 1</p>
  <h4>Heading 2</h4>
  <p>paragraph 2</p>
  <h4>Heading 3</h4>
  <p>paragraph 3</p>
  <h4>Heading 4</h4>
  <p>paragraph 4</p>
</div> 

.psc_10 h4:nth-of-type(odd) {
  background-color: orange;
}
.psc_10 h4:nth-of-type(even) {
  background-color: lightgreen;
}

<div class="psc_10">
  <h4>Heading 1</h4>
  <p>paragraph 1</p>
  <h4>Heading 2</h4>
  <p>paragraph 2</p>
  <h4>Heading 3</h4>
  <p>paragraph 3</p>
  <h4>Heading 4</h4>
  <p>paragraph 4</p>
</div> 

.psc_11 li{
  float:left;
  list-style:none;
  width:30px;
  height: 30px;
  margin:3px;
}
.psc_11 li:nth-child(3n+1){
  clear:both;
}
.psc_11 li:nth-child(5n+1){
  background-color: #F9CDCE;
}
.psc_11 li:nth-child(5n+2){
  background-color: #C1E7F7;
}
.psc_11 li:nth-child(5n+3){
  background-color: #F1F8BB;
}
.psc_11 li:nth-child(5n+4){
  background-color: #D3F8DB;
}
.psc_11 li:nth-child(5n+5){
  background-color: #F9DBBA;
}

<ul class="psc_11">
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
</ul>

table.psc_12 {
    width: auto;
    border: 1px solid #999;
    border-collapse: collapse;
}
.psc_12 th {
    color: #fff;
    padding: 5px;
    border: 1px solid #999;
    background: #666;
    text-align: center;
}
.psc_12 td {
    padding: 5px;
    border: 1px solid #999;
}
.psc_12 tr:nth-child(2n+1) {
    background: #EEE;
}

<table class="psc_12">
  <caption>対になるセレクタ</caption>
  <tr>
    <th>全ての要素をカウント</th>
    <th>同じ要素のみをカウント</th>
  </tr>
  <tr>
    <td>:first-child</td>
    <td>:first-of-type</td>
  </tr>
  <tr>
    <td>:last-child</td>
    <td>:last-of-type</td>
  </tr>
  <tr>
    <td>:nth-child()</td>
    <td>:nth-of-type()</td>
  </tr>
  <tr>
    <td>:nth-last-child()</td>
    <td>:nth-lst-of-type()</td>
  </tr>
  <tr>
    <td>:only-child</td>
    <td>:only-of-type</td>
  </tr>
</table>

.psc_13 span:nth-last-of-type(2) {
  background-color: #E7C1F8;
}

<div class="psc_13">
  <p>Lorem ipsum dolor sit amet, <span>consectetur</span> adipisicing elit. Non alias <em>dolore</em> totam vero blanditiis harum quod. Perferendis, sit, <span>praesentium possimus</span> nostrum <span>quisquam quod</span> nisi fugiat consequuntur. <span>Atque, recusandae</span> reiciendis mollitia!</p>
</div>

.psc_14 p:only-child {
  color: #FFF;
  background-color: darkgreen;
  display: inline-block;
}

<div class="psc_14">
  <p>paragraph 1</p>
  <p>paragraph 2</p>
</div>
<div class="psc_14">
  <p>paragraph only 1</p>
</div>
<div class="psc_14">
  <h4>heading 1</h4>
  <p>paragraph 1</p>
</div>

.psc_15 dt:only-child {
  color: red;
}

<dl class="psc_15">
  <dt>dt</dt>
</dl>

<dl class="psc_15">
  <dt>dt</dt>
  <dd>defines terms</dd>
</dl>

.psc_16 p:only-of-type {
  color: #FFF;
  background-color: darkgreen;
  display: inline-block;
}

<div class="psc_16">
  <p>paragraph 1</p>
  <p>paragraph 2</p>
</div>
<div class="psc_16">
  <p>paragraph only 1</p>
</div>
<div class="psc_16">
  <h4 class="noindex">heading 1</h4>
  <p>paragraph 1</p>
</div>

.psc_17 dt:only-of-type {
  color: red;
  font-weight: normal;
}

<dl class="psc_17">
  <dt>dt</dt>
</dl>
<dl class="psc_17">
  <dt>dt</dt>
  <dd>defines terms</dd>
</dl>
<dl class="psc_17">
  <dt>dt</dt>
  <dd>defines terms</dd>
  <dt>dt</dt>
  <dd>defines terms</dd>
</dl>

.psc_18 td:empty {
  background-color: red;
}

<table class="psc_18">
  <tr>
    <th>Table Head 1</th>
    <th>Table Head 2</th>
  </tr>
  <tr>
    <td>data</td>
    <td></td>
  </tr>
  <tr>
    <td>  </td><!-- 半角スペースやタブ -->
    <td>data</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td></td>
  </tr>
</table>

.psc_19 td:empty {
    background-color: blue;
}

.psc_19 td:empty::after {
    content: '空き室';
    color: #fff;
}

<table class="psc_19">
  <tr>
    <th>部屋番号</th>
    <th>予約状況</th>
  </tr>
  <tr>
    <td>Room 100</td>
    <td>予約済み</td>
  </tr>
  <tr>
    <td>Room 101</td>
    <td>予約済み</td>
  </tr>
  <tr>
    <td>Room 102</td>
    <td></td>
  </tr>
  <tr>
    <td>Room 103</td>
    <td>予約済み</td>
  </tr>
</table>

:not(p) { color: green; } /* p 要素以外を緑に */
p:not(.sample) { color: blue; } /* p 要素で sample クラス以外を青に */
p:not([title]) { color: red; } /* p 要素で title 属性を持たないもを赤に */

/* インラインスタイルで display: none が指定されている要素以外を表すセレクタ */
*:not([style*="display: none"]) /* この場合は none の前にスペースあり */

.psc_20 li {
  display: inline-block;
  padding: 0 10px;
}
.psc_20 li:not(:last-child) {
  border-right: 1px solid #666;
} 

.psc_20 li {
  display: inline-block;
  padding: 0 10px;
  border-right: 1px solid #666;
}
.psc_20 li:last-child {
  border-right: none;
}

<ul class="psc_20">
  <li>Home</li>
  <li>HTML</li>
  <li>CSS</li>
  <li>jQuery</li>
  <li>PHP</li>
</ul>

<a href="#detail">詳細</a>
・・・
<p id="detail">詳細の内容・・・</p>   

#my_target1:target {
  background-color: red;
  color: #FFF;
  font-weight: bold;
  display: inline-block;
}

#my_target2:target {
  background-color: #7CF1A5;
  width: 100px;
}
#my_target2:target::after {
  content: "my_target2";
  color: #333;
  font-weight: normal;
  background-color: #BAE2F4;
  display: block;
  width: 100px;
}

<div>
  <ul>
    <li><a href="#my_target1">Link to Target #1</a></li>
    <li><a href="#my_target2">Link to Target #2</a></li>
  </ul>
  <p id="my_target1">Target #1</p>
  <p id="my_target2">Target #2</p>
</div>

.psc_22 {
  position: relative;
  height: 300px;
}
.psc_22 ul {
  list-style-type: none;
  height: 200px;
}
.psc_22 img {
  position: absolute;
  left: 10px;
  top: 10px;
}
.psc_22 p {
  position: absolute;
  top: 220px;
}
.psc_22 a {
  margin: 10px 20px;
}
.psc_22 li:target img {
  z-index: 100;
}

<div class="psc_22">
  <ul>
    <li id="photo1"><img src="../images/sample01.jpg" alt=""></li>
    <li id="photo2"><img src="../images/sample02.jpg" alt=""></li>
    <li id="photo3"><img src="../images/sample03.jpg" alt=""></li>
  </ul>
  <p>
    <a href="#photo1">photo1</a>
    <a href="#photo2">photo2</a>
    <a href="#photo3">photo3</a>
  </p>
</div>

.psc_23 input {
  margin: 10px 0;
}
.psc_23 input:enabled{
  background-color:#CF9;
}

<div class="psc_23">
  Name: <input type="text" name="name" size="15"><br>
  Email: <input type="text" name="email" size="15"><br>
  Address:  <input type="text" name="address" size="15" disabled><br>
</div>

.psc_24 input {
  margin: 10px 0;
}
.psc_24 textarea:disabled {
  background-color: #E1BDBE;
}

<div class="psc_24">
  Name: <input type="text" name="name" size="15"><br>
  Email: <input type="text" name="email" size="15"><br>
  <p><textarea rows="3" cols="18" disabled></textarea></p>
</div>

input:checked{
  margin-right: 10px;
}
input:checked + span{
  color: green;
}

<div class="psc_25">
  <p><input type="radio" name="contact" value=""><span>Email</span></p>
  <p><input type="radio" name="contact" value=""><span>Phone</span></p>
  <p><input type="checkbox" value=""><span>チェックボックス</span></p>
</div>

.psc_26 input:checked + label{
  background-color: #BFF0CF;
}

<form class="psc_26">
  <input type="radio" name="contact" id="email_contact" value="email">
    <label for="email_contact"> Email </label>
  <input type="radio" name="contact" id="phone_contact" value="phone">
    <label for="phone_contact"> Phone </label>
  <input type="radio" name="contact" id="mail_contact" value="mail">
    <label for="mail_contact"> Mail </label>
</form>

option:checked {
  background-image: linear-gradient(0deg, lightgreen 0%, lightgreen 100%);
}

<select name="borough" size="5" multiple>
  <option value="manhattan">Manhattan</option>
  <option value="brooklyn">Brooklyn</option>
  <option value="queens">Queens</option>
  <option value="bronx">Bronx</option>
  <option value="staten">Staten Island</option>
</select>

p::first-line { font-weight: bold;}

<style>
p.dropcap::first-letter {
  font-size: 200%;
  color: #456873;
  font-weight: bold;
}
</style>

<p class="dropcap">"CSS の基本的なことについての解説です。</p>

h1, h2 { color: blue; } /* 全ての h1, h2 要素を青色に指定 */

#menu {
	display: block;
	list-style : none;
}
#menu li {
	float: left;
	width: 14.285%;
	text-align: center;
}
#menu li a {
	padding: 0 20px 10px;
	text-shadow: -1px 1px rgba(255, 255, 255, 0.8);
}
#menu li a:hover {
	color: #97C1F3;
}
#menu li a:active {
	color: #5687F8;
}