સીએસએસ સાથે ઝેબ્રા પટ્ટાવાળી કોષ્ટકો કેવી રીતે બનાવવી

મદદથી: કોષ્ટકો સાથે nth-of-type (n)

કોષ્ટકો વાંચવા માટે સરળ બનાવવા માટે, તે વૈકલ્પિક રંગભૂમિ સાથે શૈલીની પંક્તિઓ માટે ઉપયોગી છે. શૈલીના કોષ્ટકોના સૌથી સામાન્ય રીતોમાંથી એક એ છે કે દરેક અન્ય પંક્તિના બેકગ્રાઉન્ડ રંગ ગોઠવવા. આને ઘણીવાર "ઝેબ્રા પટ્ટાઓ" તરીકે ઓળખવામાં આવે છે.

તમે આ પૂર્ણ કરી શકો છો, દરેક અન્ય પંક્તિને CSS વર્ગ સાથે સેટ કરીને અને પછી તે વર્ગ માટે શૈલી નિર્ધારિત કરી શકો છો. આ કામ કરે છે પરંતુ તે વિશે જવા માટેની શ્રેષ્ઠ અથવા સૌથી કાર્યક્ષમ રીત નથી

આ પધ્ધતિનો ઉપયોગ કરતી વખતે, દર વખતે તમને તે કોષ્ટકમાં ફેરફાર કરવાની જરૂર પડે છે, જેથી દરેક પંક્તિ એ ફેરફારો સાથે સુસંગત છે તેની ખાતરી કરવા માટે તમારે ટેબલમાં દરેક હરોળને સંપાદિત કરવી પડશે. ઉદાહરણ તરીકે, જો તમે તમારા કોષ્ટકમાં એક નવી પંક્તિ દાખલ કરો છો, તો નીચેની દરેક પંક્તિને વર્ગ બદલવાની જરૂર છે.

સીએસએસ ઝેબ્રા પટ્ટાઓ સાથે શૈલી કોષ્ટકો માટે સરળ બનાવે છે. તમારે કોઈપણ વધારાની HTML વિશેષતાઓ અથવા CSS વર્ગો ઉમેરવાની જરૂર નથી, તમે ફક્ત આનો ઉપયોગ કરો: nth-of-type (n) સીએસએસ પસંદગીકર્તા .

ધ: એન-ઓફ-ટાઇપ (એન) સિલેક્ટર એ સ્ટ્રક્ચરલ સ્યુડો-ક્લાસ છે જે તમને પિતૃ અને ભાઈઓ સાથે તેમના સંબંધોના આધારે સ્ટાઇલ તત્વોની મંજૂરી આપે છે. તમે તેનો સ્રોત હુકમના આધારે એક અથવા વધુ ઘટકોને પસંદ કરવા માટે તેનો ઉપયોગ કરી શકો છો. બીજા શબ્દોમાં કહીએ તો, તે દરેક ઘટક સાથે મેળ ખાય છે જે તેના માતાપિતાના ચોક્કસ પ્રકારનાં નવમું બાળક છે.

અક્ષર n એ મુખ્ય શબ્દ (જેમ કે વિચિત્ર અથવા તો), એક સંખ્યા અથવા સૂત્ર હોઈ શકે છે.

ઉદાહરણ તરીકે, પીળા પૃષ્ઠભૂમિ રંગ સાથે દરેક અન્ય ફકરા ટેગ શૈલીમાં, તમારા CSS દસ્તાવેજમાં શામેલ હશે:

p: એનટી-ઓફ-ટાઇપ (વિચિત્ર) {
પૃષ્ઠભૂમિ: પીળો;
}

તમારા HTML કોષ્ટકથી પ્રારંભ કરો

પ્રથમ, તમારું ટેબલ બનાવો કારણ કે તમે સામાન્ય રીતે તેને HTML માં લખશો. પંક્તિઓ અથવા કૉલમ્સ માટે કોઈપણ વિશિષ્ટ વર્ગ ઉમેરશો નહીં

તમારી સ્ટાઈલશીટમાં, નીચેના CSS ઉમેરો:

tr: nth-of-type (વિચિત્ર) {
બેકગ્રાઉન્ડ રંગ: # સીસીસી;
}

આ બીજી હરોળને પહેલી પંક્તિથી શરૂ થતાં ગ્રે બેકગ્રાઉન્ડ રંગ સાથે શૈલીમાં મૂકશે.

પ્રકાર એ જ રીતે સ્તંભોને વૈકલ્પિક

તમે તમારા કોષ્ટકોમાં કૉલમ્સની સમાન પ્રકારની સ્ટાઇલ કરી શકો છો. આવું કરવા માટે, ફક્ત તમારા CSS વર્ગમાં tr ને ટીડીમાં બદલી દો. દાખ્લા તરીકે:

ટીડી: ઓફ ઓથ ઓફ (વિચિત્ર) {
બેકગ્રાઉન્ડ રંગ: # સીસીસી;
}

Nth-of-Type (n) પસંદગીકારમાં ફોર્મ્યુલાનો ઉપયોગ કરવો

સિલેક્ટરમાં ઉપયોગમાં લેવાતા સૂત્ર માટે વાક્યરચના એ + b છે.

• એ એવી સંખ્યા છે જે ચક્ર અથવા ઇન્ડેક્સ કદનું પ્રતિનિધિત્વ કરે છે.

• n વાસ્તવમાં પત્ર "n" છે અને કાઉન્ટરનું પ્રતિનિધિત્વ કરે છે, જે 0 થી તારા ધરાવે છે.

• + એક ઓપરેટર છે, જે કદાચ "-" પણ હોઈ શકે છે

• b એ એક પૂર્ણાંક છે અને ઓફસેટ મૂલ્યને રજૂ કરે છે- ઉદાહરણ તરીકે, કેટલા પંક્તિઓ નીચે પસંદગીકાર પૃષ્ઠભૂમિ રંગ લાગુ કરવાનું શરૂ કરશે જો ઓપરેટરને સૂત્રમાં સામેલ કરવામાં આવે તો આ જરૂરી છે.

ઉદાહરણ તરીકે, જો તમે દરેક ત્રીજી પંક્તિ માટે બેકગ્રાઉન્ડ રંગ સેટ કરવા માંગો છો, તો તમારો સૂત્ર 3n + 0 હશે. તમારું સીએસએસ આના જેવું દેખાશે:

tr: nth-of-type (3n + 0) {
પૃષ્ઠભૂમિ: slategray;
}

Nth-of-type selecter નો ઉપયોગ કરવા માટે મદદરૂપ સાધનો

જો તમે સ્યુડો-ક્લાસ એનથ ઓફ-ટાઇપ પસંદગીકારનો ઉપયોગ કરવાના ફોર્મુલા પાસાથી થોડો ભયંકર લાગણી અનુભવી રહ્યાં છો, તો: nth Tester સાઇટને એક ઉપયોગી સાધન તરીકે અજમાવી જુઓ જે તમને જોઈએ તે દેખાવ મેળવવા માટે વાક્યરચનાને વ્યાખ્યાયિત કરવામાં મદદ કરી શકે છે. Nth-of-type પસંદ કરવા માટે ડ્રોપડાઉન મેનૂનો ઉપયોગ કરો (તમે અહીં અન્ય સ્યુડો-વર્ગો સાથે પણ પ્રયોગ કરી શકો છો, જેમ કે nth-child).