CSS ରେ ": nth-child", ": first-child" ଏବଂ ": first-of-type" ମଧ୍ୟରେ ପାର୍ଥକ୍ୟ |

ସନ୍ଦର୍ଭ

ବିସ୍ତୃତ ବ୍ୟାଖ୍ୟା

ପ୍ରଥମେ, ଆସନ୍ତୁ ନିମ୍ନଲିଖିତ HTML ନମୁନା କୋଡ୍ ଦେଖିବା, ଏହି କୋଡ୍ ମାଧ୍ୟମରେ ଆମେ ତିନିଟି ଚୟନକର୍ତ୍ତାଙ୍କ ବ୍ୟବହାରକୁ ଗୋଟିଏ ପରେ ଗୋଟିଏ ବୁ understand ିବା |

            <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>
        

": Nth-child" ବିସ୍ତୃତ ଭାବରେ ବ୍ୟାଖ୍ୟା କଲା |

ଉପରୋକ୍ତ କୋଡ଼ରେ css1 ର ଅର୍ଥ ହେଉଛି ଦ୍ୱିତୀୟ ଶିଶୁ ଉପାଦାନ ଏବଂ ପ୍ରକାର ହେଉଛି "div", ତେଣୁ କେବଳ div1 କୁ ଚୟନ କରାଯାଇଛି | ପ୍ୟାରେଣ୍ଟ୍ ପାତ୍ରରେ div1 ହେଉଛି ଦ୍ୱିତୀୟ ଶିଶୁ ଉପାଦାନ ଏବଂ ପ୍ରକାର ହେଉଛି “div” | p3 ହେଉଛି ପ୍ୟାରେଣ୍ଟ୍ ପାତ୍ରର ଦ୍ୱିତୀୟ ଶିଶୁ ଉପାଦାନ, କିନ୍ତୁ ଏହା "div" ପ୍ରକାରର ନୁହେଁ ତେଣୁ ଏହାକୁ ଚୟନ କରାଯାଇ ନାହିଁ | ଯଦି ଆମେ ଚୟନକର୍ତ୍ତାଙ୍କ ସାମ୍ନାରେ ଡିଭ୍ ଅପସାରଣ କରିବାକୁ ଶ style ଳୀକୁ ପରିବର୍ତ୍ତନ କରୁ, ତେବେ p3 ମଧ୍ୟ ସିଲେକ୍ଟ ହେବ |

": ପ୍ରଥମ ସନ୍ତାନ" ବିସ୍ତୃତ ଭାବରେ ବ୍ୟାଖ୍ୟା କଲା |

ଉପରୋକ୍ତ କୋଡ଼ରେ css2 ର ଅର୍ଥ ହେଉଛି ପ୍ରଥମ ଶିଶୁ ଉପାଦାନ ଏବଂ ପ୍ରକାର ହେଉଛି p, ତେଣୁ କେବଳ p1 କୁ ଚୟନ କରାଯାଇଛି | p1 ହେଉଛି ପ୍ୟାରେଣ୍ଟ୍ ପାତ୍ରରେ ପ୍ରଥମ ଶିଶୁ ଉପାଦାନ ଏବଂ ପ୍ରକାର ହେଉଛି "p" | ଉପରୋକ୍ତ ": nth-child" ସହିତ ଏହାର ସମାନ ଅର୍ଥ ଅଛି | ଯଦି ଆପଣ ପାରାମିଟରକୁ 1 କୁ ପଠାଇବା ପାଇଁ ": nth-child" ବ୍ୟବହାର କରନ୍ତି, ଏହାର ପ୍ରଭାବ ସମାନ |

": ପ୍ରଥମ-ପ୍ରକାର" ବିସ୍ତୃତ ଭାବରେ ବ୍ୟାଖ୍ୟା କରାଯାଇଥିଲା |

ଉପରୋକ୍ତ ସଂକେତରେ css3 ର ଅର୍ଥ ହେଉଛି ପ୍ରଥମ ପ୍ରକାର ହେଉଛି “p” ର ଶିଶୁ ଉପାଦାନ | ଉପରୋକ୍ତ ଦୁଇଟି ଚୟନକର୍ତ୍ତାଙ୍କଠାରୁ ଏଠାରେ ପାର୍ଥକ୍ୟ ହେଉଛି ସଂପୃକ୍ତ ପ୍ରକାର ପ୍ରଥମେ ମିଳିଲା, ଏବଂ ତା’ପରେ ପ୍ରକାର ସହିତ ମେଳ ଖାଉଥିବା ପ୍ରଥମ ଉପାଦାନ ପ୍ରାପ୍ତ ହେଲା | । ତେଣୁ ମନୋନୀତଗୁଡ଼ିକ ହେଉଛି p1 ଏବଂ p3 | ଉଭୟ p1 ଏବଂ p3 ହେଉଛି ପ୍ୟାରେଣ୍ଟ୍ ପାତ୍ରରେ ପ୍ରଥମ "p" ଉପାଦାନ |