Select All Block Level Elements with CSS

Select all block level elements with css

This is not possible with CSS; you can't select an element based on one of its CSS properties. You'll need to use JavaScript to select all elements with something like getComputedStyle or something similar, and then run some script logic based on what that finds.

The closest thing you can get to in CSS is selecting HTML attributes; things like href or title.

Select only default block-level elements with jQuery

No, there's no built-in CSS selector or jQuery extension that matches elements that are, by default, block-level.

You can select ones that are currently block-level based on the current style sheet and their specific style properties, but based on your comment about the display property (which would be an incomplete solution, btw, as it doesn't allow for style sheets), it doesn't sound like you want to do that.

The list doesn't change all that frequently, of course, so you could have a hardcoded list in your app. But it sounds like you don't want that either.

CSS select all preselected elements except the last of them

Unfortunately, after further reading I came to a conclusion that as of now it's not possible to achieve what I want with pure CSS. There is hope for (near?) future though.

What I want to achieve can be "simplified" by, first, hiding everything, then overriding that styling only for one or two selected items (thanks @Kaiido for your comment to OP). For now, out of 4 possible cases (required overrides), css can handle only 3:

last item in full true list with [data-attr="true"]:last-child,
first item in full false list with [data-attr="false"]:first-child,
first false item in mixed list with [data-attr="true"]+[data-attr="false"]

For the 4th case, this draft has to become working standard and be implemented by major browser engines:

last true item in mixed list with :has(+[data-attr="false"]) (I hope that's the right code for current draft).

There are ways to simulate "previous sibling selector" functionality, although that won't work when you need both previous and next sibling selectors. More on that here

Example below (I've grayed out items instead of hiding them so that original lists are visible):

div {  border: 1px solid red;  margin: 5px;}
/* virtual display: none; on every item */.container .item {  background: gray;}
/* "unhiding" required items */.container .item[data-attr="true"]:last-child,.container .item[data-attr="false"]:first-child,.container .item[data-attr="true"]+[data-attr="false"]{  background: lime;}
/* 4th case, that might work in the future with introduction of CSS selectors level 4 */.container .item[data-attr="true"]:has( +[data-attr="false"] ){  background: lime;}

<!DOCTYPE html><html lang="en" dir="ltr"><head>  <meta charset="utf-8"></head><body>  <div class="container">    <div class="item" data-attr="true">1 true</div>    <div class="item" data-attr="true">2 true</div>    <div class="item" data-attr="false">3 false</div>    <div class="item" data-attr="false">4 false</div>  </div>  <div class="container">    <div class="item" data-attr="true">1 true</div>    <div class="item" data-attr="true">2 true</div>    <div class="item" data-attr="true">3 true</div>    <div class="item" data-attr="true">4 true</div>  </div>  <div class="container">    <div class="item" data-attr="false">1 false</div>    <div class="item" data-attr="false">2 false</div>    <div class="item" data-attr="false">3 false</div>    <div class="item" data-attr="false">4 false</div>  </div></body></html>

How to select an element's great-grandchild for CSS rules?

General css hierarchy (at any nested level) is given by a simple space

So:

#rt-header .rt-block {
    /* CSS STYLE */
}

CSS selector select all img tags inside a div irrespective of child level

try this

.my_div img
{
   max-width:100%;
}

if this doesn't applies then use !important like this

.my_div img
{
   max-width:100% !important;
}

Select all child elements recursively in CSS

Use a white space to match all descendants of an element:

div.dropdown * {
    color: red;
}

x y matches every element y that is inside x, however deeply nested it may be - children, grandchildren and so on.

The asterisk * matches any element.

Official Specification: CSS 2.1: Chapter 5.5: Descendant Selectors

Set equal vertical margins to any block element at once

The best way I have found so far is to use the Universal Selector:

:root {  --custom-vertical-margin: 1.5rem;}
* {  margin-top: var(--custom-vertical-margin);  margin-bottom: var(--custom-vertical-margin);}

How can I select all children of an element except the last child?

You can use the negation pseudo-class :not() against the :last-child pseudo-class. Being introduced CSS Selectors Level 3, it doesn't work in IE8 or below:

:not(:last-child) { /* styles */ }

How to select multiple elements using CSS

You don't need the other elements in the selector, unless you only want to match .c3 if it is within div.c1 .c2:

.c3 input,
.c3 textarea {
    /* that's it! */
}

If you do (per your edit), use this:

div.c1 .c2 .c3 input,
div.c1 .c2 .c3 textarea{
    border: 1px solid #f00;
}

Demo: http://jsfiddle.net/wesley_murch/Bp3qn/6/

after edit: thats what i'm trying to avoid (my real stylesheet is a lot more complex and css rules are longer, and its getting hard to read)

In that case, to make things easier just add another class to that .c3 like this:

<div class="c3 special">

.c3.special input,
.c3.special textarea{
    border: 1px solid #f00;
}

Demo: http://jsfiddle.net/wesley_murch/Bp3qn/7/

If you MUST have the selector as small as possible and there are no other children of .c3.special, just use the star selector (almost never recommended):

.c3.special * {border: 1px solid #f00;}

Select All Block Level Elements with CSS