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

要素の可視性の制御CSSの操作

CSS Visibilityプロパティは、要素がドキュメントに表示されるかどうかに対応する値を指定するために使用されます。要素はレンダリングされますが、CSS Visibilityが非表示に設定されている場合、表示されません。

以下は、要素の可視性を制御するために使用されるCSS可視性の値です-

）、行グループ（）、列（）、列グループ（）にのみ使用されます。この値は行または列を削除し、行または列が占めるスペースは他のコンテンツに使用できるようになります
他の要素で使用すると、「非表示」としてレンダリングされます
Sr.No 値と説明
1 表示
これはデフォルトであり、要素とその子が表示されます
2 非表示
要素を非表示にし、その子は非表示にしますが、要素は引き続きレンダリングされ、ページ上に適切なスペースが与えられます
3 折りたたみ
これは、テーブルの行（
4 初期
要素の可視性をデフォルト値に設定します
5 継承
これは、visibilityプロパティの値を親要素から継承する必要があることを指定します

例

CSSVisibilityプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility collapse</title>
<style>
form ,table{
   width:70%;
   margin: 0 auto;
   text-align: center;
}
table, th, td {
   border-collapse: collapse;
   border: 1px solid black;
}
thead {
   background-color: goldenrod;
}
tbody{
   background-color: khaki;
}
tr:nth-of-type(3){
   visibility: collapse;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Visibility-collapse</legend>
<table>
<thead>
<tr><th>Name</th><th>Course</th></tr>
</thead>
<tbody>
<tr><td>Joana</td><td>MBA</td></tr>
<tr><td>Smith</td><td>B.Arc</td></tr>
<tr><td>Xersus</td><td>M.Sc</td></tr>
</tbody>
</table>
</fieldset>
</form>
</body>
</html>

出力

これにより、次の出力が生成されます-

CSSの可視性の折りたたみは適用されません-

要素の可視性の制御CSSの操作

CSS可視性折りたたみが適用されます-

要素の可視性の制御CSSの操作

例

非表示のCSS可視性の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility hidden</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
   box-sizing: border-box;
}
input[type="button"] {
   border-radius: 10px;
}
.child{
   display: inline-block;
   height: 40px;
   width: 40px;
   color: white;
   border: 4px solid black;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Visibility-hidden</legend>
<div id="container">
<div class="child"></div><div class="child primary"></div><div class="child"></div><div class="child"></div><div class="child primary"></div><div class="child primary"></div>
</div><br>
<input type="button" value="Hide Primary Colors" onclick="visibilityHidden()">
</fieldset>
</form>
<script>
var primaryColor = document.getElementsByClassName('primary');
function visibilityHidden(){
   for(var i=0; i<3; i++)
   primaryColor[i].style.visibility = 'hidden';
}
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

[原色を非表示]をクリックする前に ボタン-

要素の可視性の制御CSSの操作

[原色を非表示]をクリックした後 ボタン-

要素の可視性の制御CSSの操作


  1. CSSを使用した子要素の選択

    CSS子コンビネータは、親要素のすべての子要素を選択するために使用されます。 CSS子コンビネータの構文は次のとおりです。 セレクター{属性：/*値*/} CSS子孫コンビネータは、親要素のすべての子孫を選択するために使用されます CSS子孫コンビネータの構文は次のとおりです セレクターセレクター{属性：/*値*/} 例 次の例は、CSSの子と子孫のコンビネータを示しています。 * {text-align：center;ボーダー：10pxグルーブトマト;} ::first-line {box-shadow：inset 0 0 7px cornflowerblue;}

  2. CSSで兄弟要素を選択する

    最初のセレクターの直後にある要素を照合する場合は、隣接する兄弟セレクター（+）を使用します。ここでは、両方のセレクターが同じ親要素の子です。 CSS隣接兄弟コンビネータの構文は次のとおりです- Selector + Selector{    attribute: /*value*/ } 2番目に選択した要素の位置に関係なく、同じ親の兄弟を選択する場合は、CSSの一般的な兄弟コンビネータを使用します。 CSSの一般的な兄弟コンビネータの構文は次のとおりです- Selector ~ Selector{    attribute: /*value*/ }