web-dev-qa-db-ja.com

表示を除外するセレクターはありますか：要素はありませんか？

親が<buttons>を持つdisplay: blockのみを選択し、親が<buttons>を持つdisplay:noneを除外します。

これを達成する方法はありますか？

htmlcssdisplay
7
alex

それらのdisplayスタイルがinlineとして宣言されている場合、次のセレクターを使用できます：div[style*="display: none;"]（要素にインラインスタイルがある場合） 「display：none;」を含む属性、次にスタイルを適用）

属性セレクター：

CSS属性セレクターは、特定の属性の存在または値に基づいて要素を照合します。

Src： https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

属性にセレクターが含まれています：

完全一致ではなく属性値の一部に基づいて要素を検索する場合、セレクターの角括弧内でアスタリスク文字*を使用できます。アスタリスクは、等号の直前の属性名の直後に置く必要があります。そうすることは、従うべき値が属性値内に現れるか含まれる必要があるだけであることを示します。

ソース： https://learn.shayhowe.com/advanced-html-css/complex-selectors/

5
UncaughtTypeError

実際には、display:noneスタイルまたは明示的なstyleプロパティが指定されていない要素を選択するためのCSS3ソリューションがあります。

*:not([style*="display: none"]) button{ ... }

デモ：

*:not([style*="display: none"]) button{
    color:yellow;
}
<p style="display:block">
  My name is A.
  <button>
a
</button>
</p>
<p style="display: none">
  <button>
b
</button>
</p>
10
cнŝdk

番号。

要素に適用されるプロパティの値に基づいて要素を選択するセレクタはありません。

CSSがそのような機能を導入することも現実的ではないと思います。想像してみてください：

:has-property-value(display: none) {
   display: block;
}
2
Quentin

CSSには、プロパティ値で選択できるそのようなセレクターはありません。 :hiddenセレクターを使用してdisplay:noneのボタンを見つけることにより、jqueryで何かを試すことができます。以下のスニペットを参照してください。

$( ".btnShow" ).click(function() {
  $( ".btn:hidden" ).show( "fast" );
});
.hidden{
  display:none;
}
.btnShow{
  display:block;
  margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="button 1" class="btn">
<input type="button" value="button 2" class="btn">
<input type="button" value="button 3" class="btn hidden">
<input type="button" value="button 4" class="btn">
<input type="button" value="button 5" class="btn hidden">
<input type="button" value="button 6" class="btn">
<input type="button" value="button 7" class="btn">
<input type="button" value="Show hidden buttons" class="btnShow">
1
RaJesh RiJo

これは、インラインcssをstyle="display: none"に明示的に指定しない限り、これまでのところ純粋なCSSでは不可能です。

いくつかのJavaScriptを使用して、表示されるbuttonsのセットをフィルタリングできます。

var buttons = document.querySelectorAll('.block button');

var visibleButtons = [];

buttons.forEach(function (element) {
  if (window.getComputedStyle(element.parentNode).display !== 'none') {
   visibleButtons.Push(element);
  }
});

console.log(visibleButtons);
.block {
  display: block;
}

.hidden {
  display: none;
}
<div class="block">
  <button>btn 1</button>
</div>

<div class="block hidden">
  <button>btn 2</button>
</div>

<div class="block">
  <button>btn 3</button>
</div>
1
Jose Paredes

Jqueryで確認できます。以下のコードは

「すべてのボタンを取得し、親がページ上に表示されているボタンでフィルタリング」、ループして各ボタンのhtmlを出力します。

$(document).ready(function(){
$(":button").filter(function() { return $(this).parent().is(':visible') 
       }).each(function(){
                      console.log($(this).html());
                });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="intro" style="display:block">
    My name is someone.    
   <button>    a    </button>    <button>    b    </button>    
</p>
<p>I live somewhere.</p>    <p>My best friend is someone.</p>
Who is your favourite:    
<ul id="find" style="display:none">
  <li>One</li>      <li>Two</li>      <li><button>    x    </button>    
  <button>    y    </button></li>    
</ul>
0
Amit