Target first class that contains string (CSS)

Question

I'm created blocks in WPBakery and have the following markup generated for a block (yeah, it's really messy, I know):

<div class="wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <div class="vc_column-inner">
          <div class="wpb_wrapper">
            <div class="myCustomDiv">
              <div class="container">
                <div class="row">
                  <div class="col-12">
                    test
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

What I'm trying to do is the apply padding: 0 to the first column in container-fluid (so wrapper > container-fluid > row > col-sm-12).

To do this, I have the following:

.container-fluid:first-of-type [class*=col-] {
  padding: 0;
}

However, the above makes all col classes have padding: 0. How can. I only target the first col class under container-fluid?

Use first-of-type or first-child – powerbuoy Mar 08 '20 at 18:00 — powerbuoy, Mar 08 '20 at 18:00

ShiZniT · Answer 1 · 2020-03-08T18:54:55.377

0

Try this:

UPDATE: I suppose you are looking for this: ( this will select the first div from inside container-fluid which contains classes attribute that have col-sm ... if you want to select classes that contains just "col-", remove the sm

.container-fluid div[class*="col-sm"]:first-of-type  {
    padding: 10px;
}

edited Mar 08 '20 at 18:54

answered Mar 08 '20 at 18:02

ShiZniT

69
2

What if its another class? `.col-sm-6` ? – Anurag Srivastava Mar 08 '20 at 18:09
try this then .container-fluid div[class^="col-sm"]:first-of-type { padding: 10px; } – ShiZniT Mar 08 '20 at 18:52

score 0 · Answer 2 · answered Mar 08 '20 at 18:03

Narrow down the elements to select by first-of-type and the parent class name to which it applies:

.container-fluid:first-of-type .myCustomDiv .container:first-of-type [class*=col-] {
  padding: 0;
}

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <div class="vc_column-inner">
          <div class="wpb_wrapper">
            <div class="myCustomDiv">
              <div class="container">
                <div class="row">
                  <div class="col-12">
                    test1
                  </div>
                </div>
              </div>
              <div class="container">
                <div class="row">
                  <div class="col-12">
                    test2
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="container">
          <div class="row">
            <div class="col-12">
              test3
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

score 0 · Answer 3 · answered Mar 08 '20 at 18:21

My understanding is that you can't use first-of-type with class names like this. See this answer for more info:

CSS3 selector :first-of-type with class name?

Now specifically with your case you have two issues – you don't want the change applied to either siblings or children of the first col- class, right? The work around shown in the link above is that you need to apply the style to the first div with that class, but then remove that styling for subsequent instances.

To find the further children use:

.container-fluid [class*=col-] [class*=col-]

To find the siblings use:

.container-fluid [class*=col-] ~ [class*=col-]

In the snippet below I've changed the styling to font color to make it easier to see.You'll see it's only applied to the first div with a 'col-' class name, and not to its children or siblings.

.container-fluid [class*=col-] {
  color: red
}

.container-fluid [class*=col-] [class*=col-] {
  color: black
}

.container-fluid [class*=col-] ~ [class*=col-] {
  color: black
}

<div class="wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        test
        <div class="vc_column-inner">
          <div class="wpb_wrapper">
            <div class="myCustomDiv">
              <div class="container">
                <div class="row">
                  <div class="col-12">
                    test
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-12">
        test
        <div class="vc_column-inner">
          <div class="wpb_wrapper">
            <div class="myCustomDiv">
              <div class="container">
                <div class="row">
                  <div class="col-12">
                    test
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Coldark · Accepted Answer · 2020-03-08T18:32:23.017

0

You can literally use > selector straight from you own question:

/* You might want to be more specific after 'div',
but since it doesn't have any siblings it's sufficient */

.container-fluid > .row > div {
  padding: 0;
}

edited Mar 08 '20 at 18:32

answered Mar 08 '20 at 18:25

Coldark

445
4
16

Target first class that contains string (CSS)

4 Answers4