સીએસએસમાં ": નવમું બાળક", ": પ્રથમ બાળક" અને ": પ્રથમ પ્રકારનું" વચ્ચેનો તફાવત

સંદર્ભ

વિગતવાર સમજૂતી

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

            <div id="divMain">
    <div>
        <p id="p1">p1</p>
        <div id="div1">div1</div>
        <p id="p2">p2</p>
    </div>
    <p id="p3">p3</p>
    <div id="div2">div2<div>
</div>
<style>
/*css1*/
#divMain div:nth-child(2) {
    color: blue;
}
/*css2*/
#divMain p:first-child {
    color: red;
}
/*css3*/
#divMain p:first-of-type {
    background-color: blue;
}
</style>
        

": નવમું બાળક" વિગતવાર સમજાવ્યું

ઉપરોક્ત કોડમાં સીએસએસ 1 નો અર્થ બીજો બાળ તત્વ છે અને પ્રકાર "ડિવ" છે, તેથી ફક્ત ડિવ 1 પસંદ થયેલ છે. Div1 એ પિતૃ કન્ટેનરનું બીજું બાળક તત્વ છે અને પ્રકાર "ડિવ" છે. p3 એ પિતૃ કન્ટેનરનું બીજું બાળ તત્વ છે, પરંતુ તે "ડિવ" પ્રકારનું નથી તેથી તે પસંદ થયેલ નથી. જો આપણે પસંદગીકારની આગળના ભાગને દૂર કરવા માટે શૈલીમાં ફેરફાર કરીએ, તો પછી પી 3 પણ પસંદ કરવામાં આવશે.

": પ્રથમ બાળક" વિગતવાર સમજાવાયેલ

ઉપરોક્ત કોડમાં સીએસએસ 2 નો અર્થ પ્રથમ બાળ તત્વ છે અને પ્રકાર પી છે, તેથી ફક્ત પી 1 પસંદ થયેલ છે. પ 1 પેરેંટર કન્ટેનરમાં પ્રથમ બાળ તત્વ છે અને પ્રકાર "પી" છે. તેનો ઉપરોક્ત ": નવમી બાળ" સાથે સમાન અર્થ છે. જો તમે પરિમાણોને 1 માં પસાર કરવા માટે ": nth-child" નો ઉપયોગ કરો છો, તો અસર બરાબર તે જ છે.

": પ્રથમ પ્રકારનું" વિગતવાર સમજાવાયેલ

ઉપરના કોડમાં સીએસએસ 3 નો અર્થ એ છે કે પ્રથમ પ્રકાર એ "પી" નો ચાઇલ્ડ એલિમેન્ટ છે. ઉપરના બે પસંદગીકારો વચ્ચેનો તફાવત એ છે કે અનુરૂપ પ્રકાર પ્રથમ મળી આવે છે, અને પછી પ્રકાર સાથે મેળ ખાતો પ્રથમ તત્વ પ્રાપ્ત થાય છે . તો પસંદ કરેલાઓ p1 અને p3 છે. બંને પી 1 અને પી 3 એ પેરેંટલ કન્ટેનરમાં પ્રથમ "પી" તત્વો છે.