Using CSS Selectors

[Spunky]

I'm trying to use CSS selectors to target specific elements throughout my page and I can't figure out proper use to target everything I am trying to.

Here my HTML, trimmed for simplicity (I hope):

<div id="formWrap">
  <div class="formContainer">
    <div class="row">
      <div class="column">
        content
      </div>
      <div class="column">
        content
      </div>
    </div>
    <!-- more rows -->
    <div class="row">
      <div class="column">
        content
      </div>
      <div class="column">
        <table class="YesNo_radio">
          <tbody>
            <tr>
              <td>
                <span>
                  content
                </span>
              </td>
              <td>
                <span>
                  content
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div> <!-- column -->
    </div> <!-- row -->
    <div class="row">
      <div class="column">
        content
      </div>
      <div class="column">
        <table>
          <tbody>
            <tr>
              <td>
                <span>
                  content
                </span>
              </td>
              <td>
                <span>
                  content
                </span>
              </td>
              <td>
                content
              </td>
            </tr>
          </tbody>
        </table>
      </div> <!-- column -->
    </div> <!-- row -->
    <!-- more rows, possibly with more tables -->
  </div> <!-- formContainer -->
  <div formContainer>
    <!-- more rows, some with tables -->
  </div>
  <!-- more formContainers, with rows, with tables -->
</div> <!-- formWrap -->
    
    

Here is my CSS:

#formWrap .formContainer .column table.YesNo_radio td:nth-of-type(2) span{
	margin-left:15px;
}

 

So basically the HTML is wrappers around rows and columns that I use to layout the content. Trickled in are tables and some of those tables use a special class that need to be treated different: specifically I want the <span> to be treated differently. For every table.YesNo_radio I need the 2nd span to have margin-left:15px;. However, using the CSS shown, it only targets the first .table.YesNo_radio's <span>. I've tried other variations to the CSS such as being even more specific (by including the <tbody>, <tr>), less specific. I think at first I had the selector elsewhere but I feel like I've determined that logically, being on the <td> makes the most sense.

CSS selectors can be very complex, so I'm guessing this is just a matter of creating it just right and I just can't figure out the magic combination. I'm hoping someone could help me out in figuring out how to position the selector/which selector to use.

[dsonesuk]

For what you have provided and what is required, it does exactly that!

[Spunky]

33 minutes ago, dsonesuk said:

For what you have provided and what is required, it does exactly that!

 

More specifically, the CSS may even be targeting the first instance of .formContainer as well. I've updated the code for another page where table.YesNo_radio doesn't appear in the first .formContainer and none of them are being targeted.

 

Here  is a JSFiddle of the example I provided above though:

https://jsfiddle.net/juanL52z/4/

 

Notice how the 2nd instance of the 2nd <span> does not receive the CSS. That's the problem.

[dsonesuk]

Notice how second table won't follow the selector rules because one of it classes is malformed and therefore non existent to apply the selectors styles used, compare the two.

[Spunky]

On 8/22/2018 at 1:03 PM, dsonesuk said:

Notice how second table won't follow the selector rules because one of it classes is malformed and therefore non existent to apply the selectors styles used, compare the two.

I don't see it. I Suppose if I did notice it, I wouldn't be here. 🤔

Are you referring to the YesNo_radio class? Malformed as in a typo?

Edited August 27, 2018 by Spunky

[dsonesuk]

Line: 63

<div formContainer>

Should have gone to "SpecSavers" OR better still https://validator.w3.org/ if you had checked here then you wouldn't have to be here either.

[Spunky]

1 hour ago, dsonesuk said:

Line: 63

<div formContainer>

Should have gone to "SpecSavers" OR better still https://validator.w3.org/ if you had checked here then you wouldn't have to be here either.

If only the code in the JSFiddle was a copy-paste of my exact code. But alas, it is not:

On 8/22/2018 at 9:00 AM, Spunky said:

Here my HTML, trimmed for simplicity (I hope):

At best I would have avoided my last response, avoiding yours as well.

 

However, I am doing my best to replicate the HTML markup that I am using in here to figure out what exactly is the problem here. Clearly it is still something else. I will see what structure I am missing from my actual code and see if I can figure this out.

[dsonesuk]

1 hour ago, Spunky said:

However, I am doing my best to replicate the HTML markup that I am using in here to figure out what exactly is the problem here. Clearly it is still something else. I will see what structure I am missing from my actual code and see if I can figure this out.

I don't know you are trying to say? Once you correct the class reference it works as it should!

Any table with class .YesNo_radio that is within #formWrap .formContainer .column, that is the second td cell of any tr row will have a margin applied to the span within it.

https://jsfiddle.net/juanL52z/39/

The link shows td cell and span with backgrounds, the spans lime background clearly shows its moved to right because of margin applied to it.