Question

I am new to CSS and facing an issue related to contextual selectors as following:

Q1) What is the effect of creating selectors in the following way:

.test1 .test2{
    background:red;
}

Here test1 and test2 are the class selectors.

I understand that when we use such structure with ‘type’ selectors then that leads to styling of descendants.

Is this the same thing for the class selectors?

Q2) If yes, then will all the contextual rules (+, >) etc.. for the ‘type’ selector will also apply for class selectors?

Q3) And will all these rules also be then applicable to the ‘id’ selectors?

I have seen the use of such structure in the css files of js libraries like ExtJS

.x-border-box .x-reset *{box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box}

But I have not been able to locate the exact implication of this structure.

Could any guide at this.

Thanks for any help in advance.

Answer 1

1. Yes, it is the same thing for class selectors.
2. Yes, the contextual rules that apply to type selectors will also apply to class selectors.
3. Yes, they will also be applicable to id selectors.

---

I have seen the use of such structure in the css files of js libraries like ExtJS

.x-border-box .x-reset *{box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box}

But I have not been able to locate the exact implication of this structure.

It means, apply that rule to all child elements of the element with the class x-reset, whose immediate or any further parent has the class x-border-box.