CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの：last-child疑似クラス

CSS：last-child疑似クラスは、他の要素の最後の子要素である要素を選択します。

構文

以下は構文です-

:last-child{
   /*declarations*/
}

CSSの最後の子の疑似クラスの例を見てみましょう-

例

<!DOCTYPE html>
<html>
<head>
<style>
table {
   margin: auto;
   padding: 10px;
   border: hsl(54, 100%, 50%) solid 13px;
   border-radius: 6px;
   text-align: center;
}
td, th {
   border-left: 2px solid black;
   border-top: 3px solid black;
}
td:last-child, th:last-child {
   border-right: 2px solid black;
}
th {
   background-color: lightblue;
   border-top: none;
}
caption {
   margin-top: 3px;
   background-color: purple;
   caption-side: bottom;
   color: white;
   border-radius: 20%;
}
</style>
</head>
<body>
<table>
<caption>Demo</caption>
<tr>
<th colspan="4">Table</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr>
</table>
</body>
</html>

出力

最後の子の疑似クラスセレクターを使用する前に-

CSSの：last-child疑似クラス

最後の子の疑似クラスセレクターを使用した後-

CSSの：last-child疑似クラス

CSSの最後の子の疑似クラスの別の例を見てみましょう-

例

<!DOCTYPE html>
<html>
<head>
<style>
* {
   font-size: 1.1em;
   list-style: circle;
}
li:first-child {
   background-color: seashell;
   font-family: cursive;
}
li:nth-child(2) {
   background-color: azure;
   font-family: "Brush Script Std", serif;
}
li:last-child {
   background-color: springgreen;
   font-family: "Gigi", Arial;
}
</style>
</head>
<body>
<h2>What is PHP?</h2>
<ul>
<li>PHP is a recursive acronym for "PHP: Hypertext Preprocessor".</li>
<li>PHP is a server side scripting language that is embedded in HTML. </li>
<li>It is integrated with a number of popular databases, including MySQL, PostgreSQL, Oracle, Sybase, Informix, and Microsoft SQL Server.</li>
</ul>
</body>
</html>

出力

CSSの：last-child疑似クラス


  1. CSSの：n番目の子の疑似クラス

    CSS：nth-​​child（）疑似クラスは、他の要素のn番目の子要素である要素を選択します。 構文 以下は構文です- :nth-child(){    /*declarations*/ } 例 CSSの例を見てみましょう：nth-​​child（）疑似クラス- <!DOCTYPE html> <html> <head> <title>CSS :nth-child() Pseudo Class</title> <style> form {    width:70%;  

  2. CSSのborder-colorプロパティ

    CSSのborder-colorプロパティは、要素の境界線の色を指定するために使用されます。また、border-top-color、border-right-color、border-left-color、border-right-colorプロパティを使用して、個々の辺の色を設定することもできます。 構文 CSSborder-colorプロパティの構文は次のとおりです- Selector {    border-color: /*value*/ } 次の例は、CSSのborder-colorプロパティ-を示しています。 例 <!DOCTYPE html>