CSS தேர்வுக்காரர்களின் முக்கிய வகைகள் என்ன?

Question

Accepted Answer

தேர்வுக்காரர்கள் ஒரு விதி எந்த உপাদனங்களுக்குப் பொருந்தும் என்பதை குறிக்கோள் வைக்கின்றன. அவை எளிமையான (குறிச்சொல் மூலம்) முதல் சக்திவாய்ந்த சேர்க்கை வரை இருக்கின்றன. ```css /* Basic selectors */ p { } /* type: all

*/ .card { } /* class: elements with class="card" (reusable) */ #header { } /* id: the one element with id="header" (unique) */ * { } /* universal: every element */ [type="text"]{ } /* attribute: inputs with type=text */ ``` ## சேர்க்கைக் குறிக்காணிகள் — உபாদனங்களுக்கு இடையிலான உறவுகள் ```css .menu li { } /* descendant: any li INSIDE .menu (any depth) */ .menu > li { } /* child: only DIRECT children li */ h2 + p { } /* adjacent sibling: the p immediately AFTER an h2 */ h2 ~ p { } /* general sibling: all p siblings after an h2 */ ``` வெளிப்பு (பரம்பரাபோடு) மற்றும் `>` (நேரடி குழந்தை) இடையிலான வேறுபாடு முக்கியமானது: `.menu li` ஆழமாக உள்ளமைக்கப்பட்ட `li` உபாதனங்களுடனும் பொருந்துகிறது, அதே சமயம் `.menu > li` கூட மட்டுமே உயர்ந்த நிலை பொருந்துகிறது. ## கூட-வகுப்புகள் மற்றும் கூட-உபாதனங்கள் ```css a:hover { } /* state: while hovered */ li:first-child { } /* structural: the first li */ li:nth-child(2n){ } /* every even li */ p::first-line { } /* pseudo-element: the first rendered line */ ``` ## தொகுப்பு மற்றும் நவீன தேர்வுக்காரர்கள் ```css h1, h2, h3 { } /* apply to all three */ :is(h1, h2) a { } /* :is() shortens long selector lists */ .card:has(img) { } /* :has() — a parent that CONTAINS an img */ ``` ## இது ஏன் முக்கியமானது தேர்வுக்காரர்கள் நீங்கள் பாணிகளை குறிப்பொருளுடன் எவ்வாறு இணைக்கிறீர்கள் என்பது. வகுப்புகளை (உழைப்பாளி), சேர்க்கைக் குறிக்காணிகளை (உறவுகளுக்கு), மற்றும் கட்டமைப்பு/நிலை கூட-வகுப்புகளை தேர்ச்சி அடைவது உங்களை எங்கும் கூடுதல் வகுப்புகளைச் சேர்க்காமல் துல்லியமாக குறிக்கோள் வைக்க அனுமதிக்கிறது — மற்றும் நவீன `:is()`/`:has()` சிக்கலான குறிக்கோளை சுருக்கமாக செய்கிறது। குறிப்பு/கனமான உள்ளமைப்பிற்கு விரும்பிய செயற்பாடுத்துவகுப்பிற்கு முன்னுரிமை கொடுங்கள் உறுதிவாக்களை நிர்வகிக்க வைக்கவும்.