CSS ನಲ್ಲಿ ": nth-child", ": first-child" ಮತ್ತು ": first-of-type" ನಡುವಿನ ವ್ಯತ್ಯಾಸ

ಉಲ್ಲೇಖ

ವಿವರವಾದ ವಿವರಣೆ

ಮೊದಲಿಗೆ, ಈ ಕೆಳಗಿನ 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>
        

": Nth-child" ವಿವರವಾಗಿ ವಿವರಿಸಲಾಗಿದೆ

ಮೇಲಿನ ಕೋಡ್‌ನಲ್ಲಿನ css1 ನ ಅರ್ಥವು ಎರಡನೇ ಮಕ್ಕಳ ಅಂಶವಾಗಿದೆ ಮತ್ತು ಪ್ರಕಾರವು "div" ಆಗಿದೆ, ಆದ್ದರಿಂದ div1 ಅನ್ನು ಮಾತ್ರ ಆಯ್ಕೆ ಮಾಡಲಾಗುತ್ತದೆ. ಡಿವ್ 1 ಪೋಷಕ ಪಾತ್ರೆಯಲ್ಲಿ ಎರಡನೇ ಮಕ್ಕಳ ಅಂಶವಾಗಿದೆ ಮತ್ತು ಪ್ರಕಾರವು "ಡಿವ್" ಆಗಿದೆ. p3 ಎಂಬುದು ಪೋಷಕ ಪಾತ್ರೆಯ ಎರಡನೇ ಮಕ್ಕಳ ಅಂಶವಾಗಿದೆ, ಆದರೆ ಇದು "div" ಪ್ರಕಾರದದ್ದಲ್ಲ ಆದ್ದರಿಂದ ಅದನ್ನು ಆಯ್ಕೆ ಮಾಡಲಾಗಿಲ್ಲ. ಸೆಲೆಕ್ಟರ್ ಮುಂದೆ ಡಿವ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲು ನಾವು ಶೈಲಿಯನ್ನು ಮಾರ್ಪಡಿಸಿದರೆ, ನಂತರ ಪಿ 3 ಅನ್ನು ಸಹ ಆಯ್ಕೆ ಮಾಡಲಾಗುತ್ತದೆ.

": ಮೊದಲ ಮಗು" ವಿವರವಾಗಿ ವಿವರಿಸಲಾಗಿದೆ

ಮೇಲಿನ ಕೋಡ್‌ನಲ್ಲಿನ css2 ನ ಅರ್ಥವು ಮೊದಲ ಮಕ್ಕಳ ಅಂಶವಾಗಿದೆ ಮತ್ತು ಪ್ರಕಾರವು p ಆಗಿದೆ, ಆದ್ದರಿಂದ p1 ಅನ್ನು ಮಾತ್ರ ಆಯ್ಕೆ ಮಾಡಲಾಗುತ್ತದೆ. p1 ಪೋಷಕ ಪಾತ್ರೆಯಲ್ಲಿನ ಮೊದಲ ಮಕ್ಕಳ ಅಂಶವಾಗಿದೆ ಮತ್ತು ಪ್ರಕಾರವು "p" ಆಗಿದೆ. ಇದು ಮೇಲಿನ ": nth-child" ಗೆ ಹೋಲುತ್ತದೆ. ನಿಯತಾಂಕವನ್ನು 1 ಕ್ಕೆ ರವಾನಿಸಲು ನೀವು ": nth-child" ಅನ್ನು ಬಳಸಿದರೆ, ಪರಿಣಾಮವು ಒಂದೇ ಆಗಿರುತ್ತದೆ.

": ಫಸ್ಟ್-ಆಫ್-ಟೈಪ್" ಅನ್ನು ವಿವರವಾಗಿ ವಿವರಿಸಲಾಗಿದೆ

ಮೇಲಿನ ಕೋಡ್‌ನಲ್ಲಿನ css3 ನ ಅರ್ಥವೇನೆಂದರೆ, ಮೊದಲ ವಿಧವು "p" ನ ಮಕ್ಕಳ ಅಂಶವಾಗಿದೆ. ಮೇಲಿನ ಎರಡು ಆಯ್ಕೆದಾರರಿಂದ ಇಲ್ಲಿರುವ ವ್ಯತ್ಯಾಸವೆಂದರೆ ಅನುಗುಣವಾದ ಪ್ರಕಾರವನ್ನು ಮೊದಲು ಕಂಡುಹಿಡಿಯಲಾಗುತ್ತದೆ, ಮತ್ತು ನಂತರ ಪ್ರಕಾರಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗುವ ಮೊದಲ ಅಂಶವನ್ನು ಪಡೆಯಲಾಗುತ್ತದೆ . ಆದ್ದರಿಂದ ಆಯ್ದವುಗಳು ಪಿ 1 ಮತ್ತು ಪಿ 3. ಪಿ 1 ಮತ್ತು ಪಿ 3 ಎರಡೂ ಮೂಲ ಪಾತ್ರೆಯಲ್ಲಿನ ಮೊದಲ "ಪಿ" ಅಂಶಗಳಾಗಿವೆ.