એક સીએસએસ ભાવિ પસંદગીકાર શું છે?

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

સીએસએસ ઉત્કૃષ્ટ પસંદગીકારો

એક સી.એસ.એસ. વંશકાર પસંદગીકાર એ તત્વો પર લાગુ થાય છે જે અન્ય તત્વની અંદર હોય છે (અથવા વધુ સચોટ રીતે જણાવવામાં આવ્યું છે, એક ઘટક જે અન્ય ઘટકોના વંશજ છે). ઉદાહરણ તરીકે, એક અશિક્ષિત સૂચિમાં વંશજો તરીકેના ટેગ્સ સાથે ટૅગ છે. ચાલો નીચેના HTML નું ઉદાહરણ તરીકે ઉપયોગ કરીએ:

• આ એક લિંક છે

  આ LI ટૅગ્સ યુએલ ટેગ વંશજો છે. એ ટેગ લી (બાળક વંશજ) અને ઉલ (પૌત્રો વંશજો) ટેગ બંનેના વંશજ છે. જો તમે કુટુંબના વૃક્ષના દાખલાનો ઉપયોગ કરીને આ વિશે વિચાર કરો છો, તો

  માતાપિતા હશે,
  • તે ઘટકનું બાળક હશે, અને
  • અને દીકરા
    .

    તો તમે આ વંશજ પસંદગીકારોનો ઉપયોગ કરીને વેબ પૃષ્ઠમાં ચોક્કસ તત્વોને કેવી રીતે નિશાન બનાવશો? પ્રથમ, તમારે જગ્યાઓ દ્વારા અલગ બે (અથવા વધુ) પ્રકાર પસંદગીકારોનો ઉપયોગ કરીને વંશજ પસંદગીકારોને વ્યાખ્યાયિત કરવું પડશે.

    li {text-decoration: none; }

    તે ઉદાહરણમાં, શૈલીઓ માત્ર લિંક એલિમેન્ટ () પર જ લાગુ થશે જે સૂચિ આઇટમ તત્વ (

    • ) ના વંશજ છે. પૃષ્ઠ પરની અન્ય તમામ લિંક્સ જે સૂચિ આઇટમની વંશજ નથી, તે આ શૈલીને પ્રાપ્ત કરશે નહીં.

      યાદ રાખવું એક અગત્યની બાબત એ છે કે તે તમારા વંશપરંપરાગત પસંદગીકારોમાં તમે જે ટેગ્સનો ઉપયોગ કરી રહ્યા છો તેના વચ્ચે કેટલા ટેગ્સ છે તે કોઈ બાબત નથી. જો પ્રથમ તત્વ અંદર બીજા તત્વ જોડાયેલ છે, તે વંશજ તરીકે પસંદ કરવામાં આવશે.

      જો તમે ઉલ તત્વોમાંથી ઉતરતા બધા એંકરો પસંદ કરવા માંગતા હો, તો તમે લખશો:

      ul a {text-decoration: none; }

      હવે, આ શૈલીઓ કોઈપણ લિંક પર લાગુ થશે જે સૂચિ આઇટમના વંશજ છે. તમે આ પસંદગીકાર પણ લખી શકો છો

      ul li {text-decoration: none; }

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

      વર્ગ પસંદગીકારો અને ID પસંદગીકારો મદદથી

      પસંદગીકારો જે તમે ઉતરતા છો તે હંમેશા પ્રકારનાં વંશજો હોતા નથી. ઉદાહરણ તરીકે, કલ્પના કરો કે તમારી પાસે "બિલબોર્ડ" ના ID વિશેષતા સાથે સાઇટનું એક ક્ષેત્ર (એક વિભાજન જેવું) હતું. તમે તે ID ની વંશજ પસંદગીકાર બંધ કરી શકો છો:

      #billboard ul {background-color: #ccc; }

      આ "બિલબોર્ડ" ના ID સાથે એક તત્વના વંશજ છે તે અનિર્ધારિત સૂચિની શૈલી કરશે. તમે ક્લાસ વેલ્યુ માટે તે જ કરી શકો છો.

      div.billboard ul {background-color: #ccc; }

      આ ધારે છે કે ડિવિઝનમાં "બિલબોર્ડ" નું વર્ગ મૂલ્ય છે. ઉપરની સીએસએસ આ વર્ગ મૂલ્ય ધરાવતી કોઈપણ ડિવિઝનની અંદરના

      તત્વની શૈલી કરશે.

      વંશજ પસંદગીકારો સાથે તમે ખરેખર ભારે હાથે અને વર્બોઝ મેળવી શકો છો. ઉદાહરણ તરીકે, જો તમે તમારા HTML કોડને લખવા માટે ડ્રીમવેવરનો ઉપયોગ કરો છો, તો ત્યાં એક સેટિંગ છે જ્યારે તમે નવા સીએસએસ નિયમો ઉમેરશો જે તે પૃષ્ઠ પર તમારા કર્સરની પ્લેસમેન્ટના આધારે પસંદગીકર્તાને સ્વતઃ-બનાવશે. આ ઉદાહરણોમાં ડ્રીમવાઇવર શું કરે છે તે એક જંગલી વર્બોઝ અને લાંબી વંશજ સિલેક્ટર બનાવે છે. તમારા CSS ને કામ કરવા માટે તે ખૂબ વિશિષ્ટતા જરૂરી નથી. તમે શું કરવા માંગો છો તે વંશજ પસંદગીકાર વચ્ચે સંતુલન શોધે છે જે એટલા ચોક્કસ છે કે જેથી તમે ચોક્કસ તત્વો (જેને તમે અસર ન કરવા માંગતા હોવ તે સ્ટાઇલીંગ વગર) પર નીચે વ્યાયામ કરી શકો છો. મોટા