suggestion: children() selector for subqueries

Dear List,

I'm just subscribed and searched the archives as it is suggested by w3c, I
hope I wouldn't disturbing.

Please, let me explain my idea, which would be useful and looks very
missing: a kind of making CSS subqueries.

First, let me explain a sample use-case. By that, I'm going to use a short
HTML code, assuming that I use Bootstrap 3:
<div class="container>
  <div class="row">
    <div class="item col-md-4 col-sm-4">
      ...
    </div>
    <div class="item col-md-4 col-sm-4">
      ...
    </div>
    <div class="item col-md-4 col-sm-4">
      ...
    </div>
  </div>
<div>

In this case I use "item" classes because of the other classes have no
meaning about the role of those DIVs, "col-*" classes are only for layout
purposes.

In the case if I want to query containers which any of their children DIVs
using "col-*" classes, or which of them used, I must to add JS which is
querying the container and adding an indicator class to it, eg. in a
jQuery-way:
if ($('.container .col-lg-4').length > 0 $('.container').addClass('col-lg');
if ($('.container .col-md-4').length > 0 $('.container').addClass('col-md');
if ($('.container .col-sm-4').length > 0 $('.container').addClass('col-sm');
if ($('.container .col-xs-4').length > 0 $('.container').addClass('col-xs');

As an addition, let imagine this JS snipet to col-lg-1..12, col-md-1..12,
etc. which will results 48 lines of mess code.

Now I able to query and targeting the container like this:
..container.col-lg { ... }
..container.col-md { ... }
....etc.

My suggestion what if CSS would have a children() selector for placing a
subquery as an argument:
..container:children(.col-lg-4) { ... }
..container:children(.col-md-4) { ... }
....etc.

In the above example I can add rules to .container regarding of its
children, without JS, and without break the CSS control-flow. Additionally,
this idea could be implemented easily because no need to use new operator,
only reuses the available query parser.

I know that my sample case is not that real, but points to real-world
practice, eg. thought I want to control the width of the container
regarding to framework-driven breakpoints (defined by @media queries)
without the need of repeating the media-queries defined by the framework.
Even more usable if you think about I want to make my component compatible
to more than one CSS frameworks, which may use different breakpoints. Let
me explain this last issue:

@media (min-width: 768px) {
  /* for bootstrap 3 */
  .container { ... }
}

@media (min-width: 800px) {
  /* for dummy framework */
  .container { ... }
}

These would results in a conflict very easily, while this would not so:

..container:children(.col-md-4) { ... }
..container:children(.column-df-4) { ... } /* assuming that this belongs the
dummy framework */

Even if I know that there's a best-practice for placing these two different
sets of rules into two different CSS files, there are a lot of case where
people mixing two or more CSS frameworks or simply unsure where the
breakpoints are exactly, or the breakpoints are generated using SASS or
LESS and there are no guarantee for if the same version of the same
framework contains the same exact breakpoints in the real, because of
customization.

Maybe, there are some more usable cases and I'm sorry if I'm looks not so
well-thought about it, I just want to point to a few cases which based on
my very own personal experiences.

Best regards,
Csaba