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

特定のクラス/属性/タイプを持たない要素を選択するためのCSSセレクター

CSS：not（）疑似クラスを使用すると、特定の値を持たない要素やセレクターと一致しない要素を選択することで、スタイルを調整できます。

例

次の例は、CSSを示しています：疑似クラスではありません。

<!DOCTYPE html>
<html>
<head>
<style>
p {
   background-color: cornflowerblue;
   color: white;
}
p:not(div>p) {
   background-color: khaki;
   font-size: 1.4em;
   font-style: italic;
   color: blue;
}
</style>
</head>
<body>
<div>
<p>Curabitur sapien diam, imperdiet ut est sed, blandit blandit velit. Nunc viverra nunc id ligula ultricies, a fringilla lacus interdum. <span>Sed vel diam at magna pellentesque porttitor.</span>
</p>
<h3>Demo</h3>
</div>
<p> Ut rutrum sapien sit amet sapien lacinia, at ullamcorper felis lobortis. Praesent dignissim vel turpis nec ultricies.</p>
</body>
</html>

出力

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

特定のクラス/属性/タイプを持たない要素を選択するためのCSSセレクター

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 2%;
   background-color: cadetblue;
   padding: 10%;
   height: 80px;
}
div:not(.parent) {
   box-shadow: inset 0 0 24px tomato;
   padding: 2%;
}
.parent{
   border: 4px ridge orange;
}
.one {
   background-color: lightgreen;
   border: 4px groove gray;
}
.two{
   height: 20px;
}
</style>
</head>
<body>
<div class="parent">
<div class="one">
<div class="two"></div>
<div class="two"></div>
</div>
<div class="one"></div>
</div>
</body>
</html>

出力

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

特定のクラス/属性/タイプを持たない要素を選択するためのCSSセレクター


  1. CSS子孫セレクター

    CSSの子孫セレクターは、指定された要素の子孫であるすべての要素を照合するために使用されます。 例 次のコードを実行して、CSSDescendentSelectorを実装してみてください。 <!DOCTYPE html> <html>    <head>       <style>          div p {             background-color: orange

  2. CSSの要素タイプセレクター

    CSS要素タイプセレクターは、タイプのすべての要素を選択するために使用されます。 CSS要素タイプセレクターの構文は次のとおりです 構文 element {    /*declarations*/ } 例 次の例は、CSS要素タイプセレクターを示しています <!DOCTYPE html> <html> <head> <style> li {    list-style: none;    margin: 5px;    border-bottom-style: do