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

CSS：focus-疑似クラス内

フォーカスされた要素の親のスタイルを設定する場合は、CSS：focus-withinpseudo-classを使用します。

次の例は、CSS：focus-withinpseudo-classを示しています。

例

<!DOCTYPE html>
<html>
<head>
<style>
form {
   margin: 2%;
   padding: 2%;
   display: flex;
   flex-direction: column;
   background: thistle;
}
input {
   margin: 2%;
}
form:focus-within {
   background-color: burlywood;
   box-shadow: 0 0 12px rgba(0,0,0,0.6)
}
input:focus {
   box-shadow: 0 0 12px rgba(0,0,0,0.6)
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="name"/>
<input type="email" placeholder="email"/>
</form>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSS：focus-疑似クラス内

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   width: 40%;
   margin: 2%;
   padding: 2%;
   display: flex;
   flex-direction: column;
   background: lavenderblush;
}
div > * {
   margin: 2%;
}
div:focus-within {
   background-color: aliceblue;
   box-shadow: 0 0 12px rgba(0,0,0,0.6)
}
</style>
</head>
<body>
<div>
<textarea></textarea>
<button>Click</button>
</div>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSS：focus-疑似クラス内


  1. CSSワードブレイクプロパティ

    word-breakプロパティは、行を分割するために使用されます。 例 次のコードは、単語分割のサンプルコードを示しています。 <html>    <head>       <style>          p.text1 {             width: 140px;             border: 1px solid #

  2. CSS疑似要素

    最初の文字、最初の行、またはその前後に挿入するなど、要素の特定の部分のスタイルを設定できます。これらの目的のために、CSS疑似要素が使用されます。 注 − CSS疑似クラスを疑似要素から分離するために、CSS3では、疑似要素はダブルコロン表記を使用します。 構文 以下は、要素でCSS疑似要素を使用するための構文です- Selector::pseudo-element {    css-property: /*value*/; } 以下は、利用可能なすべてのCSS疑似要素です- Sr.No 疑似要素と説明 1 後 言及された各要素のコンテンツの後