CODEWITHSUNDEEP
css
alstack
alstack

Reputation: 5

Skip class selector

Got a question I hope someone can help me with.

Example code:

<div class="Main">
 <div class="Variable">
  <div class="Target">
  </div>
 </div>
</div>

I want to target the "Target" class within the "Main" class. So if it wasn't for the "Variable" class I could use this:

.Main .Target {}

However, the "Variable" class is in between. I can't specify the "Variable" class, as the class is variable and changes depending on the layout of the site.

Is there any way I can still target the "Target" class within the "Main" class, without knowing the "Variable" class, i.e. skipping it?

Thanks in advance!

Upvotes: 0

Views: 2324

Answers (2)

n-dru
n-dru

Reputation: 9430

You can use this easily:

.Main .Target {}

It matches all descendants, not only direct. (https://jsfiddle.net/LqheL0u1/)

You could not however use the following, which you probably thought acted like the above:

.Main > .Target {}

As this would select direct descendants, so called children.

Upvotes: 1

Jacob G
Jacob G

Reputation: 14172

.Main .Target {} selects all the .Target that are children of .Main, which is what I am assuming you want.

If you have other styles that are overriding it, or you want to just select the .Target that are direct children of .Variable just select like 

.Main > div > .Target{}

Upvotes: 1

Related Questions