Paano Mag-target ng CSS Class sa loob ng Isa pang CSS Class

”. Pagkatapos, maglaan ng katangian ng klase para sa karagdagang paggamit.

Hakbang 2: Gumawa ng mga Nested na 'div' na Container

Susunod, gumawa ng mga nested div container sa pamamagitan ng pagsunod sa parehong pamamaraan ng hakbang 1:

< div klase = 'pangunahing nilalaman' >

< div klase = 'mesa' >

< div klase = 'hilera' >

< div klase = 'c-kaliwa' > Magpakasal < / div >

< div klase = 'c-tama' > Jack < / div >

< div klase = 'c-kaliwa' > Tom < / div >

< div klase = 'c-tama' > Hulyo < / div >

< / div >

< / div >

< / div >

Output

---

---

Hakbang 3: Ilapat ang Pag-istilo sa Pangunahing “div” na Container

I-access ang pangunahing ' div ” lalagyan sa tulong ng pangalan ng klase bilang “ .pangunahing nilalaman ”:

.pangunahing nilalaman {

lapad : 40% ;

margin : 0 sasakyan ;

kulay : asul ;

hangganan : 2px may tuldok asul ;

text-align : gitna ;

}

dito:

• “ lapad ” ay tumutukoy sa laki ng lapad ng elemento.
• “ margin ” naglalaan ng espasyo sa paligid ng elemento sa labas ng tinukoy na hangganan.
• “ kulay ” ay tumutukoy sa kulay para sa idinagdag na teksto sa elemento.
• “ hangganan ” ay tumutukoy sa isang balangkas o hangganan sa paligid ng elemento sa HTML.
• “ Text-align ” ay tumutukoy sa pagkakahanay ng teksto ng elemento.

Hakbang 4: Mag-istilo ng ibang klase

I-access ang pangunahing klase ng CSS at iba pang mga nested na klase sa pamamagitan ng paggamit ng kanilang mga pangalan. Pagkatapos, itakda ang lapad ng lalagyan sa pamamagitan ng pagtukoy sa halaga ayon sa iyong pinili:

.pangunahing nilalaman .table {

lapad : 80% ;

}

Higit pa rito, i-access ang ibang klase sa pamamagitan ng pagsunod sa parehong pamamaraan tulad ng nasa itaas at ilapat ang mga katangian ng CSS na binanggit sa snippet ng code sa ibaba:

.pangunahing nilalaman .c-tama {

display : inline-block ;

laki ng font : 20px ;

}

Ayon sa snippet ng code sa itaas:

• “ display Ang ” property ay ginagamit para sa pagtatakda ng pagpapakita ng isang elemento.
• “ laki ng font ” ay tumutukoy sa laki ng tekstong idinagdag sa lalagyan.

Ngayon, i-access ang iba pang mga klase sa pamamagitan ng paggamit ng parehong paraan at ilapat ang mga sumusunod na katangian ng CSS tulad ng nabanggit sa ibaba:

.pangunahing nilalaman .c-kaliwa {

lapad : 140px ;

margin-right : 6px ;

laki ng font : 16px ;

}

Upang magawa ito, mag-aaplay kami ' lapad ”, “ margin-right 'at' laki ng font ” para sa mga layunin ng pag-istilo.

Bukod dito, i-access ang pangunahing ' div ” container kasama ng iba pang nested div container sa pamamagitan ng paggamit ng pangalan ng kanilang klase at ilapat ang mga sumusunod na katangian ng CSS

.pangunahing .c-tama {

lapad : sasakyan ;

laki ng font : 15px ;

kulay : #fff ;

margin-right : 20px ;

bigat ng font : normal ;

}

Output

Iyon lang ang tungkol sa pag-target ng isang klase ng CSS sa loob ng isa pang klase ng CSS.

Konklusyon

Upang i-target ang isang klase ng CSS sa loob ng isa pang klase ng CSS, una, i-access ang pangunahing ' div ” sa pamamagitan ng nakatalagang katangian ng klase. Pagkatapos, i-access ang isa pang 'div' na lalagyan sa pamamagitan ng pagsunod sa parehong pamamaraan. Higit pa rito, maaaring i-target ng mga user ang isang CSS class sa loob ng ibang CSS class. Ang post na ito ay nagpakita ng paraan para sa pag-target ng isang klase ng CSS sa loob ng isa pang klase ng CSS.