CSS Pseudo Classes 偽元素

:active

活動連結，運用於標籤點選。

/* css範例 */

a:link {
  color: green;
}

a:visited {
  color: green;
}

a:hover {
  color: red;
}

a:active {
  color: yellow;
}

:valid 與 :invalid

:valid 設定表單驗證，填寫正確值元素樣式
:invalid 設定表單驗證，填寫無效或錯誤值元素樣式

<input>與<form>

/* css範例 */

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

input:valid + span::before {
  content: '✓';
  color: green;
}

form:valid {
  border: 5px solid #ddffdd;
}
  
input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}

:required

選在表單必填元素，套用樣式，適用於<input>、<select>、<textarea>

<!--Html範例-->
<input type="text" required>

/* css範例 */

input:required {
  border: 1px dashed red;
}

:focus

滑鼠點擊元素與透過鍵盤[tab鍵]點選元素樣式

<!--Html範例-->

<input type="text" name="search">

/* css範例 */

input:focus {
  background-color: yellow;
}

input[type=text] {
  width: 100px;
  -webkit-transition: width .35s ease-in-out;
  transition: width .35s ease-in-out;
}

input[type=text]:focus {
  width: 250px;
}

:focus-visible

只針對鍵盤[tab鍵]點選元素樣式

:focus-within

滑鼠點擊元素與透過鍵盤[tab鍵]多焦點選取，雙重樣式

<!--html範例[點選input，form持續焦點樣式]-->

<form>
    <label for="given_name">Given Name:</label>
    <input id="given_name" type="text">
    <br>
    <label for="family_name">Family Name:</label>
    <input id="family_name" type="text">
</form>

/* css範例[點選input，form持續焦點樣式] */

form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}

:checked

選擇器已選取樣式，radio <input type=”radio”>、checkbox <input type=”checkbox”>、option <option>中 <select>，開啟狀態

:checked toggle進階使用參考

<!--html範例 [radio、checkbox、select]-->

<div>
  <input type="radio" name="my-input" id="yes">
  <label for="yes">Yes</label>

  <input type="radio" name="my-input" id="no">
  <label for="no">No</label>
</div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in">
  <label for="opt-in">Check me!</label>
</div>

<select name="my-select" id="fruit">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>

/* css範例 [radio、checkbox、select] */

div,
select {
  margin: 8px;
}

/* Labels for checked inputs */
input:checked + label {
  color: red;
}

/* Radio element, when checked */
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/* Checkbox element, when checked */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/* Option elements, when selected */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

:disabled

禁用元素樣式，selected, clicked on, typed into…

<!--Html範例-->

<input type="text" placeholder="Name" disabled>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab" disabled>Saab</option>
  <option value="opel">Opel</option>
  <option value="audi" disabled>Audi</option>
  <option value="bmw">BMW</option>
</select>

/* css範例 */

input[type="text"]:disabled {
  background: #ccc;
}
option:disabled {
  background: red;
}

:enabled

使用元素樣式，selected, clicked on, typed into…

<!--Html範例-->

<input type="text" value="Mickey"><!--使用中-->
<input type="text" disabled="disabled" value="Disneyland"><!--禁用中-->

/* css範例 */

input[type=text]:enabled {
  background: #ffff00;
}

input[type=text]:disabled {
  background: #dddddd;
}

:empty

為空元素指定樣式

<!--Html範例-->

<div class="box"><!-- 此區塊為空元素= lime--></div>
<div class="box">此區塊有純文字 = pink</div>
<div class="box">
	<!-- 此區塊註解有空白或段行，舊瀏覽器會判斷有元素，而使用 pink -->
</div>
<div class="box">
	<p><!-- 次區塊有元素<p> = pink --></p>
</div>

/* css範例 */

.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}

:in-range 與 :out-of-range

:in-range <input>元素值在min和max屬性指定的範圍限制內，設計樣式。
:out-of-range <input>元素值在min和max屬性指定的範圍限制外，設計樣式。

<!--Html範例-->

<input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12" required>

/* css範例 */

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: 'okay.';
}

input:out-of-range + label::after {
  content: 'out of range!';
}

:lang(language-code)

指定元素值，並設定樣式

<p lang="it">Ciao bella!</p>

p:lang(it) { 
  background: yellow;
}

:first-child 與 :last-child

:first-child 設定第1個元素樣式
:last-child 設定倒數第1元素樣式

<!--Html範例-->

<div>
  <p>我是<p>元素第一行，套用樣式</p>
  <p>我是<p>元素第二行，無樣式</p>
</div>

<div>
  <h2>我是<h2>元素第一行，無樣式</h2>
  <p>我是<p>元素第三行，無樣式</p>
</div>

/* css範例 */

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

:first-of-type 與 :last-of-type

:first-of-type 設定不同區塊裡，同一層第1個元素樣式
:last-of-type 設定不同區塊裡，同一層倒數第1元素樣式

<!--Html範例-->

<article>
    <div>我是第1個"div"元素，套用樣式。</div>
    
    <div>第2個"div"元素，<span>我是第一個"span"元素，套用樣式。</span></div>
    
    <div>第3個"div"元素，<em>我是第1個"em"元素，套用樣式。</em>, 另外<em>我是第2個"em"元素，無樣式。</em></div>
    
    <div>第4個"div"元素，<span>我是"div"中"span"的第一個元素，套用樣式。</span></div>
    
    <b>第1個"b"元素，套用樣式。</b>
    
    <div>第5個"div"元素，無樣式。</div>
</article>

/* css範例 */

article :first-of-type {
  background-color: pink;
}

:nth-child() 與 :nth-last-child()

選擇父元素內第n個元素

:nth-child(2) 設定第n個元素樣式
:nth-child(odd) 設定單數元素樣式
:nth-child(even) 設定雙數元素樣式

:nth-last-child為倒數計算

/* css範例 */

p:nth-child(2) {
  background: red;
}

p:nth-child(odd) {
  background: red;
}

p:nth-child(even) {
  background: blue;
}

(n) An+B 指定元素

An + B自定義數字：
A=循環數(組)
n=從0開始(計數器)
B=循環數範圍內的第n個元素(偏移值)

範例說明

p:nth-child(n) = 每個<p>元素

nth-child(2n+1) = 2元素循環組的第1個元素 = nth-child(odd)
nth-child(2n) = 2元素循環組的第2個元素 =nth-child(even)
nth-child(5n) = 5元素循環組的第5個元素
nth-child(n+7) = 第7個元素與以下所有元素
nth-child(-n+3) = 第3個元素與以上所有元素
nth-child(3n+4) = 3元素循環組以下的第4個元素

p:nth-child(1) or p:nth-child(0n+1) = 第1個元素 = first-child
p:nth-child(n+8):nth-child(-n+15) = 第8個元素以下到第15個元素以上 = 8~15

PS.IE8以上支援

/* css範例 */

tr:nth-child(1){
    background-color:#69C;
    }

:nth-of-type() 與 :nth-last-of-type()

選擇父元素內指定類型第n個元素

:nth-of-type(<nth> )
where
= <an-plus-b> | even | odd

:nth-of-type(2) 設定第n個元素樣式
:nth-of-type(odd) 設定單數元素樣式
:nth-of-type(even) 設定雙數元素樣式

:nth-last-of-type() 為倒數計算

/* css範例 */

/* Odd paragraphs */
p:nth-of-type(2n+1) {
  color: red;
}

/* Even paragraphs */
p:nth-of-type(2n) {
  color: blue;
}

/* First paragraph */
p:nth-of-type(1) {
  font-weight: bold;
}

/* This has no effect, as the .fancy class is only on the 4th p element, not the 1st */
p.fancy:nth-of-type(1) {
  text-decoration: underline;
}

<!--html範例-->

<div>
  <div>無效果套用</div>
  <p>我是p:nth-of-type(1)結果</p>
  <p>我是p:nth-of-type(2n)結果</p>
  <div>無效果套用</div>
  <p>我是p:nth-of-type(2n+1)結果</p>
  <p class="fancy">無效果套用，p.fancy:nth-of-type(1)為第1個p元素，本.fancy元素為第4個p元素=p.fancy:nth-of-type(4)</p>
</div>

:not(selector)

css3選擇器，套用指定以外元素樣式。

:not(.class)

指定class以外元素樣式。

/* css範例 */

div {
  color: black;
}
div:not(.active) {
  color: green;
}

<!--html範例-->

<div class="active">我是black樣式</div>
<div>我是green樣式</div>
<div>我是green樣式</div>

:not(.class):not(.class)

指定雙重class以外元素樣式。

/* css範例 */

div {
  color: black;
}
div:not(.active1) :not(.active2) {
  color: green;
}

<!--html範例-->

<div class="active1">我是black樣式</div>
<div>我是green樣式</div>
<div class="active2">我是black樣式</div>

:not(:first-child)

第1個元素以外元素樣式。

/* css範例 */

ul li{ 
      color:#000000;
}
ul li:not(:first-child){ 
      color:#red;
}

<!--html範例-->

<ul>
     <li>列表1 我是黑色</li>
     <li>列表2 我是紅色</li>
     <li>列表3 我是紅色</li>
</ul>

:only-child

父元素內指定類型，並僅有1個指定類型元素，才會有樣式，如父元素有其他類型元素或有第2個指定元素，也不會有樣式

/* css範例 */
p:only-child {
  background: red;
}

<!--html範例-->

<div><p>1個指定元素，套用樣式</p></div>
<div><p>This is a paragraph.</p><p>This is a paragraph.</p>2種指定元素，無套用樣式</div>
<div><span>This is a span.</span><p>This is a paragraph.</p>2種類型元素，2種類型元素中有1個指定元素，無套用樣式</div>

:only-of-type

父元素內指定類型，並僅單1個指定類型元素，才會有樣式，如父元素有其他類型元素，但有單1個指定元素，同樣會針對該類型套用樣式，如有第2個指定元素，則不會套用樣式

/* css範例 */

p:only-of-type {
  background: red;
}

<!--html範例-->

<div><p>1個指定元素，套用樣式</p></div>
<div><p>This is a paragraph.</p><p>This is a paragraph.</p>2種指定元素，無套用樣式</div>
<div><span>This is a span.</span><p>This is a paragraph.</p>2種類型元素，2種類型元素中有1個指定元素，套用樣式</div>

:optional

選擇表單內沒設定必填(required)屬性，套用樣式，適用於<input>、<select>、<textarea>

/* css範例 */

label {
  display: block;
  margin: 1px;  
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}
 
input:optional {
  border-color: rebeccapurple;
  border-width: 3px;
}

<!--html範例-->

<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input"> 非必填元素，套用樣式
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required> 必填元素，無套用樣式
  </div>
</form>

:read-only 與 :read-write

:read-only 選擇表單內不可編輯(readonly)元素
:read-write 選擇表單內可編輯元素
套用樣式，適用於<input>、<textarea>

/* css範例 */

input:-moz-read-only, textarea:-moz-read-only,
input:read-only, textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:-moz-read-write,
textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}

<!--html範例-->

<form>
    本表單不可編輯，套用:read-only樣式
    <input type="text" value="" readonly>
    <textarea name="address" readonly></textarea>
</form>

<form>
    本表單可編輯，套用:read-write樣式
    <input type="text" value="">
    <textarea></textarea>
</form>

:target

點選連結標籤，套用點選至標籤內容範圍樣式(url的id)

<!--html範例-->
<p><a href="#news1">連結標籤 1</a></p>
<p><a href="#news2">連結標籤 2</a></p>

<p id="news1"><b>點選連結標籤，這裡會顯示套用樣式效果...</b></p>
<p id="news2"><b>點選連結標籤，這裡會顯示套用樣式效果...</b></p>

/* css範例 */

:target {
  border: 2px solid #D4D4D4;
  background-color: #e5eecc;
}

:first

<!--html範例-->

<p>First Page.</p>
<p>Second Page.</p>
<button>Print!</button>

/* css範例 */

/* Selects the first page when printing */
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}