Theory
ટપાલીનો કોયડો
કલ્પો કે તમે તમારી personal portfolio ની website બનાવી રહ્યા છો. તમારી પાસે લખાણના દસ જુદા ફકરા છે, પણ તમારે માત્ર તમારા Contact ના વિભાગના એક જ ફકરાને તેજસ્વી લાલ પશ્ચાદભૂમિ આપવી છે. જો તમે સામાન્ય ફકરાના tag ને સીધું style કરો, તમારા આખા homepage પરના દસેદસ ફકરા લાલ થઈ જાય છે! તો તમે દરેકે દરેક HTML tag માં ગંદી inline styles નકલ કર્યા વગર browser ને બિલકુલ કયું element style કરવું એ કેવી રીતે કહો? તમે CSS selectors વાપરો છો, જે તમારા web ના પાનાના ઘટકો માટે ચોકસાઈવાળાં ટપાલનાં સરનામાં તરીકે કામ કરે છે.
Theory
College ના Hostel ની Directory
તમારા HTML document ને એક college ના campus ના hostel જેવો વિચારો. એક Element selector એટલે બૂમ પાડવી: 'ધ્યાન આપો, બધા BCA ના students!' એ શ્રેણીના બધા જવાબ આપે છે. એક Class selector એટલે પોકારવું: 'Cricket ની ટીમના બધા સભ્યો!' (જુદા ઓરડાના અનેક students સાથે બહાર આવી શકે). એક ID selector એટલે એક ચોક્કસ university ના roll number ને બોલાવવો: 'Roll Number 45!' માત્ર એક જ અનન્ય student જવાબ આપે છે. Combinators એટલે કહેવું: 'Roll Number 45 નો તાત્કાલિક roommate શોધો'.
Theory
CSS Selectors ને ઔપચારિક રીતે સમજવા
University નાં પ્રશ્નપત્રોમાં, એક CSS Selector ને એવી ભાત તરીકે વ્યાખ્યાયિત કરાય છે જે તમે style કરવા માંગતાં HTML elements ને નિશાન બનાવવા અને પસંદ કરવા વપરાય છે. પાયાના selectors માં Element (h1 જેવા tag ના નામથી નિશાન બનાવે), ID (#idname વાપરીને એક અનન્ય element ને નિશાન બનાવે), અને Class (.classname વાપરીને અનેક elements ને નિશાન બનાવે) શામેલ છે. અદ્યતન વિકલ્પોમાં Attribute selectors ([type='text'] જેવા હયાત ગુણધર્મોથી elements ને નિશાન બનાવવા) અને Pseudo-elements (એક element ના ચોક્કસ સંરચનાત્મક ભાગો style કરવા જેમ કે સુશોભિત drop caps બનાવવા ::first-letter) શામેલ છે.
At a glance
Table 1: મુખ્ય CSS Selectors અને Exam ની Syntax
| Selector નો પ્રકાર | Syntax નું ઉદાહરણ | એ શું નિશાન બનાવે છે |
|---|---|---|
| Element | p { color: blue; } | આખા web ના પાના પરનું દરેકે દરેક p tag |
| ID | #hero { background: gray; } | id='hero' વાળું એક જ અનન્ય element |
| Class | .btn { font-weight: bold; } | class='btn' ધરાવતું કોઈ પણ element |
| Attribute | [target='_blank'] { color: red; } | એક તદ્દન નવા tab માં ખૂલવા ગોઠવાયેલી links |
| Pseudo-element | p::first-line { color: gold; } | એક ફકરાની અંદરના લખાણની માત્ર સૌથી પહેલી લીટી |
Theory
કુટુંબવૃક્ષ: Combinators
HTML ના માળખામાં એમના બિલકુલ સ્થાનના આધારે elements ને નિશાન બનાવવા, university ની પરીક્ષાઓ વારંવાર ચાર સંરચનાત્મક combinators ચકાસે છે. Contextual (descendant selector, div p જેમ એક space સાથે લખાય છે) એક div ની અંદરના કોઈ પણ ફકરાને નિશાન બનાવે છે, ભલે એ ગમે તેટલો ઊંડે nested હોય. Direct descendent (div > p) માત્ર એ ફકરાને નિશાન બનાવે છે જે એ div નું તાત્કાલિક બાળક હોય. Adjacent sibling (h2 + p) એક h2 પછી બિલકુલ મુકાયેલા ફકરાને નિશાન બનાવે છે. General sibling (h2 ~ p) એ જ માતાપિતા હેઠળ એક h2 પછી આવતા બધા ફકરાને નિશાન બનાવે છે.
Practical
Portfolio Selection Rules
/* Element Selector: Global change */
h2 {
color: #2c3e50;
}
/* ID Selector: Unique section styling */
#about-me {
background-color: #f8f9fa;
}
/* Class Selector: Reusable component style */
.project-card {
border: 1px solid #dddddd;
}
/* Direct Descendent Selector: Immediate list items only */
ul > li {
list-style: none;
}
/* Adjacent Sibling Selector: Paragraph directly following a heading */
h2 + p {
font-weight: bold;
}Quiz
એક university ની lab પરીક્ષામાં, તમારે એક footer element ની અંદરની links નો લખાણનો રંગ બદલવો છે, પણ બીજે ક્યાંયની links ને સંપૂર્ણપણે અછૂતી છોડવી છે. કયો selector સાચો છે?
- footer a
- footer + a
- footer ~ a
- footer:a
Show the answer
footer a
Contextual descendant selector (footer અને a વચ્ચે એક space) footer element ની અંદર આવેલાં બધાં anchor tags સાથે મળે છે, ભલે એ ગમે તેટલાં ઊંડે nested હોય. '+' વાપરવાથી footer પછી તરત આવતી link શોધાય છે, જ્યારે '~' footer પછીની કોઈ પણ sibling link શોધે છે.
Think first
જટિલ Combinators ઉકેલવા
Selector નો નિયમ 'article > p + span' તપાસો. જવાબ ઉજાગર કરતાં પહેલાં મનમાં બિલકુલ ટ્રેસ કરો કે કયું element style મેળવશે.
Show the answer
આ selector એક 'span' element ને નિશાન બનાવે છે. શરતો કડક છે: span એ એક 'p' tag નું તાત્કાલિક પડખેનું sibling હોવું જોઈએ (એની બરાબર પછી મુકાયેલું), અને એ 'p' tag એક 'article' element નું સીધું બાળક (તાત્કાલિક વંશજ) હોવું જોઈએ. જો ફકરો article ની અંદરના એક અલગ section element ની અંદર nested હોય, તો આ નિયમ લાગુ થવામાં નિષ્ફળ જશે.
Quiz
તમારી stylesheet માં 'div p' અને 'div > p' લખવા વચ્ચેનો નિર્ણાયક સંરચનાત્મક ભેદ શું છે?
- div p માત્ર પહેલા ફકરાને નિશાન બનાવે છે, જ્યારે div > p બધા ફકરાને નિશાન બનાવે છે.
- div p એ div ની અંદર ગમે ત્યાંના કોઈ પણ ફકરાને નિશાન બનાવે છે, જ્યારે div > p માત્ર તાત્કાલિક બાળકોને નિશાન બનાવે છે.
- div p એ અમાન્ય CSS ની syntax છે, જ્યારે div > p એ standard layout ની syntax છે.
- div p માતાપિતા પર styles લગાવે છે, જ્યારે div > p આડાં siblings પર styles લગાવે છે.
Show the answer
div p એ div ની અંદર ગમે ત્યાંના કોઈ પણ ફકરાને નિશાન બનાવે છે, જ્યારે div > p માત્ર તાત્કાલિક બાળકોને નિશાન બનાવે છે.
'div p' એ એક descendant selector છે જે એ div ની અંદરનો દરેકે દરેક ફકરો શોધે છે, ભલે એ sections કે blocks જેવાં બીજાં elements ની અંદર વીંટાળેલો હોય. 'div > p' એ એક child selector છે, જે માત્ર એ ફકરા સાથે મળે છે જેમનું તાત્કાલિક માતાપિતા એ ચોક્કસ div હોય.
Watch out
બેવડા ID નો દંડ
University ની lab practicals માં marks ગુમાવવાનું સૌથી મોટું કારણ છે એક જ પાના પર એક ID selector ફરીથી વાપરવો. જ્યારે એક ઉદાર browser કદાચ એ જ ID વાળાં અનેક elements પર style લગાવે, ત્યારે તમારો HTML code ચકાસણીમાં સંપૂર્ણપણે નિષ્ફળ જશે, અને document.getElementById() જેવો પછીનો JavaScript નો code તૂટશે. આ નિયમ યાદ રાખો: IDs તમારા university ના roll number ની જેમ સખ્તાઈથી અનન્ય છે, જ્યારે Classes તમારા course ના વિભાગના નામની જેમ સંપૂર્ણપણે ફરીથી વાપરી શકાય એવા છે.
Theory
Placements માટે આ કેમ Matter કરે છે
પછીના semesters માં corporate placement ના અભિયાનો માટે તમારી portfolio ની website બનાવતી વખતે, ચોક્કસ selectors લખવાથી style નું ફેલાવું અટકે છે. પચાસ જુદા અલગ classes બનાવવાને બદલે, વ્યાવસાયિક developers સાફ, જાળવણીયોગ્ય stylesheets લખવા combinators અને pseudo-elements (જેમ કે nav a:hover) વાપરે છે જે વ્યાવસાયિક દેખાય છે અને અતિશય ઝડપથી load થાય છે.
Summary
Key takeaways
- Element selectors એક HTML tag ના દરેક દાખલા પર વૈશ્વિક styles લગાવે છે.
- Classes એક બિંદુનો prefix વાપરે છે અને અનેક વસ્તુઓ પર પૂરેપૂરી ફરીથી વાપરી શકાય છે.
- IDs એક hash નો prefix વાપરે છે અને એક જ પાના પર સંપૂર્ણપણે અનન્ય રહેવા જ જોઈએ.
- Combinators વંશજો, સીધાં બાળકો, અને પડખેનાં siblings જેવા સંબંધો સંભાળે છે.
- Pseudo-elements લખાણની પહેલી લીટી જેવા content ના ચોક્કસ ભાગો style કરે છે.
- Memory hook: જૂથ માટે બિંદુ, એકલા માટે hash!