:first-child, :last-child, :nth-child() ಮುಂತಾದ ಸಿಎಸ್‌ಎಸ್‌ ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಂಡು ನಿಮ್ಮ ವೆಬ್ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ ಸುಧಾರಿತ ಮತ್ತು ಡೈನಾಮಿಕ್ ಸ್ಟೈಲಿಂಗ್ ನೀಡಿ. ನಿಮ್ಮ ಎಲಿಮೆಂಟ್ ಆಯ್ಕೆಯನ್ನು ಸುಧಾರಿಸಿ ಮತ್ತು ಸುಲಭವಾಗಿ ಆಕರ್ಷಕ ಯೂಸರ್ ಇಂಟರ್ಫೇಸ್ಗಳನ್ನು ರಚಿಸಿ.
ಸಿಎಸ್‌ಎಸ್‌ ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳು: ಡೈನಾಮಿಕ್ ಸ್ಟೈಲಿಂಗ್‌ಗಾಗಿ ಸುಧಾರಿತ ಎಲಿಮೆಂಟ್ ಆಯ್ಕೆ
ಡಾಕ್ಯುಮೆಂಟ್ ಟ್ರೀಯಲ್ಲಿ ಎಲಿಮೆಂಟ್‌ಗಳ ಸ್ಥಾನದ ಆಧಾರದ ಮೇಲೆ ಅವುಗಳನ್ನು ಟಾರ್ಗೆಟ್ ಮಾಡಲು ಮತ್ತು ಸ್ಟೈಲ್ ಮಾಡಲು ಸಿಎಸ್‌ಎಸ್‌ ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳು ಒಂದು ಶಕ್ತಿಯುತ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತವೆ. ಈ ಸೆಲೆಕ್ಟರ್‌ಗಳು ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಮೊದಲ, ಕೊನೆಯ, ಅಥವಾ n-ನೇ ಚೈಲ್ಡ್‌ಗೆ ನಿರ್ದಿಷ್ಟ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತವೆ, ಇದರಿಂದ ಡೈನಾಮಿಕ್ ಮತ್ತು ಆಕರ್ಷಕ ವೆಬ್ ಇಂಟರ್ಫೇಸ್ಗಳನ್ನು ರಚಿಸುವ ಸಾಧ್ಯತೆಗಳು ತೆರೆದುಕೊಳ್ಳುತ್ತವೆ. ಈ ಮಾರ್ಗದರ್ಶಿ ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳ ಜಗತ್ತನ್ನು ಪರಿಶೋಧಿಸುತ್ತದೆ, ನಿಮ್ಮ ಸಿಎಸ್‌ಎಸ್‌ ಕೌಶಲ್ಯಗಳನ್ನು ಹೆಚ್ಚಿಸಲು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಸಂದರ್ಭಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಸಿಎಸ್‌ಎಸ್‌ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳ ಬಗ್ಗೆ ತಿಳಿಯುವ ಮೊದಲು, ಸಿಎಸ್‌ಎಸ್‌ನಲ್ಲಿ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳು ಎಂದರೆ ಏನು ಎಂದು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ನೋಡೋಣ. ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳು ಸೆಲೆಕ್ಟರ್‌ಗಳಿಗೆ ಸೇರಿಸಲಾಗುವ ಕೀವರ್ಡ್‌ಗಳಾಗಿದ್ದು, ಆಯ್ಕೆಮಾಡಿದ ಎಲಿಮೆಂಟ್(ಗಳ) ವಿಶೇಷ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತವೆ. ಅವು ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಅವುಗಳ ಹೆಸರು, ಆಟ್ರಿಬ್ಯೂಟ್‌ಗಳು ಅಥವಾ ಕಂಟೆಂಟ್‌ಗಿಂತ ಹೆಚ್ಚಾಗಿ ಅವುಗಳ ಸ್ಥಾನ, ಸ್ಥಿತಿ ಅಥವಾ ಇತರ ಡೈನಾಮಿಕ್ ಮಾನದಂಡಗಳ ಆಧಾರದ ಮೇಲೆ ಸ್ಟೈಲ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ಬಳಕೆದಾರರು ಒಂದು ಎಲಿಮೆಂಟ್ ಮೇಲೆ ಮೌಸ್ ಹೋವರ್ ಮಾಡಿದಾಗ :hover ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.
ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳಿಗೆ ಪರಿಚಯ
ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳು ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳ ಒಂದು ಉಪವಿಭಾಗವಾಗಿದ್ದು, ಅವು ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿನ ಅವುಗಳ ಸ್ಥಾನದ ಆಧಾರದ ಮೇಲೆ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಟಾರ್ಗೆಟ್ ಮಾಡುತ್ತವೆ. ಪಟ್ಟಿಗಳು, ಟೇಬಲ್‌ಗಳು ಅಥವಾ ಎಲಿಮೆಂಟ್‌ನ ಸ್ಥಳದ ಆಧಾರದ ಮೇಲೆ ವಿಭಿನ್ನ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ನೀವು ಬಯಸುವ ಯಾವುದೇ ಕಂಟೆಂಟ್ ರಚನೆಯನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಇವು ಅತ್ಯಂತ ಉಪಯುಕ್ತವಾಗಿವೆ.
ಪ್ರಮುಖ ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳು
1. :first-child
:first-child ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ತನ್ನ ಪೇರೆಂಟ್‌ನಲ್ಲಿನ ಮೊದಲ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ. ಪಟ್ಟಿಯಲ್ಲಿನ ಮೊದಲ ಐಟಂಗೆ, ಟೇಬಲ್‌ನಲ್ಲಿನ ಮೊದಲ ಸಾಲಿಗೆ ಅಥವಾ ನೀವು ಆರಂಭಿಕ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ಬಯಸುವ ಯಾವುದೇ ಸನ್ನಿವೇಶದಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.
ಉದಾಹರಣೆ: ನ್ಯಾವಿಗೇಷನ್ ಮೆನುವಿನಲ್ಲಿ ಮೊದಲ ಲಿಸ್ಟ್ ಐಟಂ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು.
nav ul li:first-child {
font-weight: bold;
color: #007bff;
}
ಈ ಸಿಎಸ್‌ಎಸ್‌ ಕೋಡ್ <nav> ಎಲಿಮೆಂಟ್‌ನ <ul> ನಲ್ಲಿನ ಮೊದಲ ಲಿಸ್ಟ್ ಐಟಂ ಅನ್ನು ಬೋಲ್ಡ್ ಮತ್ತು ನೀಲಿ ಬಣ್ಣಕ್ಕೆ ಬದಲಾಯಿಸುತ್ತದೆ.
ಪ್ರಾಯೋಗಿಕ ಅಪ್ಲಿಕೇಶನ್: ಒಂದು ಇ-ಕಾಮರ್ಸ್ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಫೀಚರ್ಡ್ ಪ್ರಾಡಕ್ಟ್ಸ್ ವಿಭಾಗದಲ್ಲಿ ಮೊದಲ ಉತ್ಪನ್ನವನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಹೈಲೈಟ್ ಮಾಡಲು ನೀವು :first-child ಅನ್ನು ಬಳಸಬಹುದು.
2. :last-child
ಇದಕ್ಕೆ ವಿರುದ್ಧವಾಗಿ, :last-child ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ತನ್ನ ಪೇರೆಂಟ್‌ನಲ್ಲಿನ ಕೊನೆಯ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ. ಕೊನೆಯದನ್ನು ಹೊರತುಪಡಿಸಿ ಎಲ್ಲಾ ಐಟಂಗಳಿಗೆ ಬಾರ್ಡರ್ ಅಥವಾ ಮಾರ್ಜಿನ್ ಸೇರಿಸಲು ಅಥವಾ ಸರಣಿಯಲ್ಲಿನ ಅಂತಿಮ ಎಲಿಮೆಂಟ್‌ಗೆ ನಿರ್ದಿಷ್ಟ ಸ್ಟೈಲ್ ಅನ್ನು ಅನ್ವಯಿಸಲು ಇದು ಪರಿಪೂರ್ಣವಾಗಿದೆ.
ಉದಾಹರಣೆ: ಪಟ್ಟಿಯಲ್ಲಿನ ಕೊನೆಯ ಐಟಂನಿಂದ ಕೆಳಗಿನ ಬಾರ್ಡರ್ ಅನ್ನು ತೆಗೆದುಹಾಕುವುದು.
ul li {
border-bottom: 1px solid #ccc;
}
ul li:last-child {
border-bottom: none;
}
ಈ ಸಿಎಸ್‌ಎಸ್‌ ಕೋಡ್ ಕೊನೆಯದನ್ನು ಹೊರತುಪಡಿಸಿ ಎಲ್ಲಾ ಲಿಸ್ಟ್ ಐಟಂಗಳಿಗೆ ಕೆಳಭಾಗದಲ್ಲಿ ಬಾರ್ಡರ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ, ಇದರಿಂದ ಕೆಳಗೆ ಹೆಚ್ಚುವರಿ ಬಾರ್ಡರ್ ಇಲ್ಲದೆ ಸ್ವಚ್ಛವಾದ ದೃಶ್ಯ ವಿಭಜನೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
ಪ್ರಾಯೋಗಿಕ ಅಪ್ಲಿಕೇಶನ್: ಕಾಂಟ್ಯಾಕ್ಟ್ ಫಾರ್ಮ್‌ನಲ್ಲಿ, ಸಬ್‌ಮಿಟ್ ಬಟನ್‌ಗಿಂತ ಮೊದಲಿನ ಕೊನೆಯ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ನಿಂದ ಕೆಳಗಿನ ಮಾರ್ಜಿನ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲು ನೀವು :last-child ಅನ್ನು ಬಳಸಬಹುದು.
3. :nth-child(n)
:nth-child(n) ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ಹೆಚ್ಚು ಬಹುಮುಖಿ ಸೆಲೆಕ್ಟರ್ ಆಗಿದ್ದು, ಅದು ಪೇರೆಂಟ್‌ನಲ್ಲಿನ ಅವುಗಳ ಸಂಖ್ಯಾತ್ಮಕ ಸ್ಥಾನದ ಆಧಾರದ ಮೇಲೆ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಟಾರ್ಗೆಟ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇಲ್ಲಿ n ಒಂದು ಸಂಖ್ಯೆ, ಕೀವರ್ಡ್ (even ಅಥವಾ odd), ಅಥವಾ ಒಂದು ಸೂತ್ರವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ: ಟೇಬಲ್‌ನಲ್ಲಿ ಪ್ರತಿ ಎರಡನೇ ಸಾಲನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು.
table tr:nth-child(even) {
background-color: #f2f2f2;
}
ಈ ಸಿಎಸ್‌ಎಸ್‌ ಕೋಡ್ ಟೇಬಲ್‌ನಲ್ಲಿನ ಪ್ರತಿ ಸಮ-ಸಂಖ್ಯೆಯ ಸಾಲಿಗೆ ತಿಳಿ ಬೂದು ಬಣ್ಣದ ಹಿನ್ನೆಲೆಯನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ, ಇದು ಓದುವಿಕೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ: ಮೂರನೇ ಚೈಲ್ಡ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದು.
div p:nth-child(3) {
color: green;
}
ಈ ಸಿಎಸ್‌ಎಸ್‌ ಕೋಡ್ <div> ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿನ ಮೂರನೇ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ಹಸಿರು ಬಣ್ಣಕ್ಕೆ ಬದಲಾಯಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ: ಪ್ರತಿ ಮೂರನೇ ಚೈಲ್ಡ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಸೂತ್ರವನ್ನು ಬಳಸುವುದು.
ul li:nth-child(3n) {
font-style: italic;
}
ಈ ಸಿಎಸ್‌ಎಸ್‌ ಕೋಡ್ ಪ್ರತಿ ಮೂರನೇ ಲಿಸ್ಟ್ ಐಟಂಗೆ ಇಟಾಲಿಕ್ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.
ಪ್ರಾಯೋಗಿಕ ಅಪ್ಲಿಕೇಶನ್: ಒಂದು ಸುದ್ದಿ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ, ಪ್ರತಿ ಮೂರನೇ ಲೇಖನವನ್ನು ವಿಭಿನ್ನವಾಗಿ ಸ್ಟೈಲ್ ಮಾಡಲು ನೀವು :nth-child(n) ಅನ್ನು ಬಳಸಬಹುದು, ಇದು ದೃಶ್ಯ ವೈವಿಧ್ಯತೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ ಮತ್ತು ನಿರ್ದಿಷ್ಟ ವಿಷಯವನ್ನು ಹೈಲೈಟ್ ಮಾಡುತ್ತದೆ.
4. :nth-of-type(n)
:nth-of-type(n) ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ :nth-child(n) ಗೆ ಹೋಲುತ್ತದೆ, ಆದರೆ ಇದು ಪೇರೆಂಟ್‌ನಲ್ಲಿನ ಅವುಗಳ ಪ್ರಕಾರದ (type) ಆಧಾರದ ಮೇಲೆ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಟಾರ್ಗೆಟ್ ಮಾಡುತ್ತದೆ. ಅಂದರೆ, ಎಣಿಕೆ ಮಾಡುವಾಗ ಅದು ಒಂದೇ ಪ್ರಕಾರದ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಮಾತ್ರ ಪರಿಗಣಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ: div ಒಳಗೆ ಎರಡನೇ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು.
div p:nth-of-type(2) {
font-size: 1.2em;
}
ಈ ಸಿಎಸ್‌ಎಸ್‌ ಕೋಡ್ <div> ಒಳಗೆ ಎರಡನೇ ಪ್ಯಾರಾಗ್ರಾಫ್ ಎಲಿಮೆಂಟ್‌ನ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ. ಎಣಿಕೆ ಮಾಡುವಾಗ ಅದು div ಒಳಗೆ ಇರುವ ಯಾವುದೇ ಇತರ ಪ್ರಕಾರದ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ.
ಪ್ರಾಯೋಗಿಕ ಅಪ್ಲಿಕೇಶನ್: ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ನಲ್ಲಿ, ಪ್ಯಾರಾಗ್ರಾಫ್‌ಗಳು ಅಥವಾ ಹೆಡ್ಡಿಂಗ್‌ಗಳಂತಹ ಇತರ ಎಲಿಮೆಂಟ್‌ಗಳ ಉಪಸ್ಥಿತಿಯನ್ನು ಲೆಕ್ಕಿಸದೆ, ಪ್ರತಿ ಎರಡನೇ ಚಿತ್ರವನ್ನು ವಿಭಿನ್ನವಾಗಿ ಸ್ಟೈಲ್ ಮಾಡಲು ನೀವು :nth-of-type(n) ಅನ್ನು ಬಳಸಬಹುದು.
5. :first-of-type
:first-of-type ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ತನ್ನ ಪೇರೆಂಟ್‌ನಲ್ಲಿನ ತನ್ನ ಪ್ರಕಾರದ ಮೊದಲ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ. ಕಂಟೇನರ್‌ನಲ್ಲಿನ ಮೊದಲ ಪ್ಯಾರಾಗ್ರಾಫ್, ಚಿತ್ರ, ಅಥವಾ ಯಾವುದೇ ಇತರ ನಿರ್ದಿಷ್ಟ ಪ್ರಕಾರದ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.
ಉದಾಹರಣೆ: ಲೇಖನದೊಳಗಿನ ಮೊದಲ ಚಿತ್ರವನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು.
article img:first-of-type {
float: left;
margin-right: 10px;
}
ಈ ಸಿಎಸ್‌ಎಸ್‌ ಕೋಡ್ <article> ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿನ ಮೊದಲ ಚಿತ್ರವನ್ನು ಎಡಕ್ಕೆ ಫ್ಲೋಟ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅದರ ಬಲಕ್ಕೆ ಮಾರ್ಜಿನ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ.
ಪ್ರಾಯೋಗಿಕ ಅಪ್ಲಿಕೇಶನ್: ಉತ್ಪನ್ನ ವಿವರಣೆ ಪುಟದಲ್ಲಿ, ಮುಖ್ಯ ಉತ್ಪನ್ನದ ಚಿತ್ರವನ್ನು ಪ್ರಮುಖವಾಗಿ ಪ್ರದರ್ಶಿಸಲು ನೀವು :first-of-type ಅನ್ನು ಬಳಸಬಹುದು.
6. :last-of-type
:last-of-type ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ತನ್ನ ಪೇರೆಂಟ್‌ನಲ್ಲಿನ ತನ್ನ ಪ್ರಕಾರದ ಕೊನೆಯ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ. ಇದು :first-of-type ನ ಪ್ರತಿರೂಪವಾಗಿದೆ ಮತ್ತು ಕಂಟೇನರ್‌ನಲ್ಲಿನ ನಿರ್ದಿಷ್ಟ ಪ್ರಕಾರದ ಅಂತಿಮ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
ಉದಾಹರಣೆ: ಸೆಕ್ಷನ್‌ನಲ್ಲಿನ ಕೊನೆಯ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು.
section p:last-of-type {
margin-bottom: 0;
}
ಈ ಸಿಎಸ್‌ಎಸ್‌ ಕೋಡ್ <section> ಒಳಗೆ ಕೊನೆಯ ಪ್ಯಾರಾಗ್ರಾಫ್ ಎಲಿಮೆಂಟ್‌ನಿಂದ ಕೆಳಗಿನ ಮಾರ್ಜಿನ್ ಅನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ.
ಪ್ರಾಯೋಗಿಕ ಅಪ್ಲಿಕೇಶನ್: ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ನಲ್ಲಿ, ಅಂತಿಮ ಪ್ಯಾರಾಗ್ರಾಫ್‌ನಿಂದ ಕೆಳಗಿನ ಮಾರ್ಜಿನ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲು ನೀವು :last-of-type ಅನ್ನು ಬಳಸಬಹುದು, ಇದು ಸ್ವಚ್ಛವಾದ ದೃಶ್ಯ ಅಂತ್ಯವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
ನೈಜ-ಪ್ರಪಂಚದ ಬಳಕೆಯ ಸಂದರ್ಭಗಳು ಮತ್ತು ಉದಾಹರಣೆಗಳು
ನೈಜ-ಪ್ರಪಂಚದ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುವ ಕೆಲವು ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.
1. ನ್ಯಾವಿಗೇಷನ್ ಮೆನುವನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು
ನ್ಯಾವಿಗೇಷನ್ ಮೆನುಗಳು ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿ ಸಾಮಾನ್ಯವಾದ ಎಲಿಮೆಂಟ್‌ಗಳಾಗಿವೆ, ಮತ್ತು ಅವುಗಳ ನೋಟವನ್ನು ಹೆಚ್ಚಿಸಲು ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.
<nav>
<ul>
<li><a href="#home">ಮುಖಪುಟ</a></li>
<li><a href="#about">ನಮ್ಮ ಬಗ್ಗೆ</a></li>
<li><a href="#services">ಸೇವೆಗಳು</a></li>
<li><a href="#contact">ಸಂಪರ್ಕ</a></li>
</ul>
</nav>
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
nav ul li {
margin-right: 20px;
}
nav ul li:first-child {
font-weight: bold;
}
nav ul li:last-child {
margin-right: 0;
}
ಈ ಕೋಡ್ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುವನ್ನು ಸಮತಲವಾಗಿ ಸ್ಟೈಲ್ ಮಾಡುತ್ತದೆ, ಬುಲೆಟ್ ಪಾಯಿಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ ಮತ್ತು ಮೊದಲ ಐಟಂ ಅನ್ನು ಬೋಲ್ಡ್ ಮಾಡುತ್ತದೆ. ಇದು ಕೊನೆಯ ಐಟಂನಿಂದ ಬಲ ಮಾರ್ಜಿನ್ ಅನ್ನು ಸಹ ತೆಗೆದುಹಾಕುತ್ತದೆ, ಸರಿಯಾದ ಅಂತರವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
2. ಉತ್ಪನ್ನ ಪಟ್ಟಿಯನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು
ಇ-ಕಾಮರ್ಸ್ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಉತ್ಪನ್ನಗಳನ್ನು ಗ್ರಿಡ್ ಅಥವಾ ಲಿಸ್ಟ್ ಫಾರ್ಮ್ಯಾಟ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತವೆ. ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ಉತ್ಪನ್ನ ಪಟ್ಟಿಗಳನ್ನು ರಚಿಸಲು ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.
<div class="product-list">
<div class="product"><img src="product1.jpg" alt="ಉತ್ಪನ್ನ 1"><p>ಉತ್ಪನ್ನ 1 ವಿವರಣೆ</p></div>
<div class="product"><img src="product2.jpg" alt="ಉತ್ಪನ್ನ 2"><p>ಉತ್ಪನ್ನ 2 ವಿವರಣೆ</p></div>
<div class="product"><img src="product3.jpg" alt="ಉತ್ಪನ್ನ 3"><p>ಉತ್ಪನ್ನ 3 ವಿವರಣೆ</p></div>
<div class="product"><img src="product4.jpg" alt="ಉತ್ಪನ್ನ 4"><p>ಉತ್ಪನ್ನ 4 ವಿವರಣೆ</p></div>
</div>
.product-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.product {
border: 1px solid #ccc;
padding: 10px;
}
.product:nth-child(odd) {
background-color: #f9f9f9;
}
ಈ ಕೋಡ್ ಉತ್ಪನ್ನಗಳನ್ನು ಎರಡು-ಕಾಲಮ್ ಗ್ರಿಡ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರತಿ ಉತ್ಪನ್ನಕ್ಕೆ ಬಾರ್ಡರ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ. ಇದು ಪ್ರತಿ ಬೆಸ-ಸಂಖ್ಯೆಯ ಉತ್ಪನ್ನಕ್ಕೆ ತಿಳಿ ಬೂದು ಬಣ್ಣದ ಹಿನ್ನೆಲೆಯನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ, ದೃಶ್ಯ ವ್ಯತ್ಯಾಸವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
3. ಟೇಬಲ್ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು
ಟೇಬಲ್‌ಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಟ್ಯಾಬ್ಯುಲರ್ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳು ಟೇಬಲ್ ಓದುವಿಕೆ ಮತ್ತು ನೋಟವನ್ನು ಹೆಚ್ಚಿಸಬಹುದು.
<table>
<thead>
<tr>
<th>ಹೆಸರು</th>
<th>ವಯಸ್ಸು</th>
<th>ದೇಶ</th>
</tr>
</thead>
<tbody>
<tr>
<td>ಜಾನ್ ಡೋ</td>
<td>30</td>
<td>ಯುಎಸ್ಎ</td>
</tr>
<tr>
<td>ಜೇನ್ ಸ್ಮಿತ್</td>
<td>25</td>
<td>ಕೆನಡಾ</td>
</tr>
<tr>
<td>ಡೇವಿಡ್ ಲೀ</td>
<td>40</td>
<td>ಯುಕೆ</td>
</tr>
</tbody>
</table>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
thead {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
ಈ ಕೋಡ್ ಟೇಬಲ್ ಅನ್ನು ಬಾರ್ಡರ್‌ಗಳು, ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಪರ್ಯಾಯ ಸಾಲು ಬಣ್ಣಗಳೊಂದಿಗೆ ಸ್ಟೈಲ್ ಮಾಡುತ್ತದೆ, ಇದು ಓದುವಿಕೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳನ್ನು ಇತರ ಸೆಲೆಕ್ಟರ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸುವುದು
ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳನ್ನು ಇತರ ಸಿಎಸ್‌ಎಸ್‌ ಸೆಲೆಕ್ಟರ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ ಇನ್ನಷ್ಟು ನಿರ್ದಿಷ್ಟ ಮತ್ತು ಶಕ್ತಿಯುತ ಸ್ಟೈಲಿಂಗ್ ನಿಯಮಗಳನ್ನು ರಚಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೀವು ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ಅನ್ನು ಕ್ಲಾಸ್ ಸೆಲೆಕ್ಟರ್ ಅಥವಾ ಆಟ್ರಿಬ್ಯೂಟ್ ಸೆಲೆಕ್ಟರ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು.
ಉದಾಹರಣೆ: ನಿರ್ದಿಷ್ಟ ಕ್ಲಾಸ್ ಹೊಂದಿರುವ ಮೊದಲ ಐಟಂ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು.
ul li.highlight:first-child {
color: red;
}
ಈ ಸಿಎಸ್‌ಎಸ್‌ ಕೋಡ್ "highlight" ಕ್ಲಾಸ್ ಹೊಂದಿರುವ ಮೊದಲ ಲಿಸ್ಟ್ ಐಟಂಗೆ ಮಾತ್ರ ಕೆಂಪು ಬಣ್ಣವನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.
ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ
ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳನ್ನು ಕ್ರೋಮ್, ಫೈರ್‌ಫಾಕ್ಸ್, ಸಫಾರಿ, ಎಡ್ಜ್, ಮತ್ತು ಒಪೇರಾ ಸೇರಿದಂತೆ ಆಧುನಿಕ ವೆಬ್ ಬ್ರೌಸರ್‌ಗಳು ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿಸುತ್ತವೆ. ಆದಾಗ್ಯೂ, ಸ್ಥಿರವಾದ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಸಿಎಸ್‌ಎಸ್‌ ಕೋಡ್ ಅನ್ನು ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸುವುದು ಯಾವಾಗಲೂ ಉತ್ತಮ ಅಭ್ಯಾಸವಾಗಿದೆ.
ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಪರಿಗಣನೆಗಳು
- ಸೆಮ್ಯಾಂಟಿಕ್ HTML ಬಳಸಿ: ನಿಮ್ಮ HTML ರಚನೆಯು ತಾರ್ಕಿಕ ಮತ್ತು ಸೆಮ್ಯಾಂಟಿಕ್ ಆಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ, ಏಕೆಂದರೆ ಇದು ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳೊಂದಿಗೆ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಟಾರ್ಗೆಟ್ ಮಾಡುವುದನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
- ಅತಿಯಾದ-ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ತಪ್ಪಿಸಿ: ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು ಶಕ್ತಿಯುತವಾಗಿದ್ದರೂ, ನಿರ್ವಹಿಸಲು ಕಷ್ಟಕರವಾದ ಅತಿಯಾದ ನಿರ್ದಿಷ್ಟ ನಿಯಮಗಳನ್ನು ರಚಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ.
- ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ: ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಸ್ಥಿರವಾದ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಸಿಎಸ್‌ಎಸ್‌ ಕೋಡ್ ಅನ್ನು ಯಾವಾಗಲೂ ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ.
- ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ದಕ್ಷವಾಗಿದ್ದರೂ, ದೊಡ್ಡ ಡೇಟಾಸೆಟ್‌ಗಳಲ್ಲಿ ಸಂಕೀರ್ಣ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ, ಏಕೆಂದರೆ ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು.
- ಕಾಮೆಂಟ್‌ಗಳನ್ನು ಬಳಸಿ: ನಿಮ್ಮ ಸೆಲೆಕ್ಟರ್‌ಗಳ ಉದ್ದೇಶವನ್ನು ವಿವರಿಸಲು ನಿಮ್ಮ ಸಿಎಸ್‌ಎಸ್‌ ಕೋಡ್‌ಗೆ ಕಾಮೆಂಟ್‌ಗಳನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಇತರರಿಗೆ (ಅಥವಾ ಭವಿಷ್ಯದಲ್ಲಿ ನಿಮಗಾಗಿ) ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭಗೊಳಿಸಿ.
ತೀರ್ಮಾನ
ಸಿಎಸ್‌ಎಸ್‌ ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳು ವೆಬ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಒಂದು ಅಮೂಲ್ಯವಾದ ಸಾಧನವಾಗಿದ್ದು, ಸುಧಾರಿತ ಎಲಿಮೆಂಟ್ ಆಯ್ಕೆ ಮತ್ತು ಡೈನಾಮಿಕ್ ಸ್ಟೈಲಿಂಗ್‌ಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ. ಈ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ವಿಭಿನ್ನ ಕಂಟೆಂಟ್ ರಚನೆಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ವೆಬ್ ಇಂಟರ್ಫೇಸ್ಗಳನ್ನು ರಚಿಸಬಹುದು. ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ ಒದಗಿಸಲಾದ ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳ ಅಂತ್ಯವಿಲ್ಲದ ಸಾಧ್ಯತೆಗಳನ್ನು ಅನ್ವೇಷಿಸಿ.
ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ಸಿಎಸ್‌ಎಸ್‌ ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಬಳಸಲು ಒಂದು ದೃಢವಾದ ಅಡಿಪಾಯವನ್ನು ಒದಗಿಸುತ್ತದೆ. ನೀವು ಕಲಿಯುವುದನ್ನು ಮತ್ತು ಪ್ರಯೋಗ ಮಾಡುವುದನ್ನು ಮುಂದುವರಿಸಿದಂತೆ, ನಿಮ್ಮ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಕೌಶಲ್ಯಗಳನ್ನು ಹೆಚ್ಚಿಸಲು ಮತ್ತು ಅಸಾಧಾರಣ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ಇನ್ನಷ್ಟು ಸೃಜನಾತ್ಮಕ ಮಾರ್ಗಗಳನ್ನು ನೀವು ಕಂಡುಕೊಳ್ಳುವಿರಿ.
ಹೆಚ್ಚಿನ ಕಲಿಕೆ
ಸಿಎಸ್‌ಎಸ್‌ ಪೊಸಿಶನಲ್ ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳ ಬಗ್ಗೆ ನಿಮ್ಮ ತಿಳುವಳಿಕೆಯನ್ನು ಇನ್ನಷ್ಟು ಆಳವಾಗಿಸಲು, ಈ ಕೆಳಗಿನ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಅನ್ವೇಷಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ:
ಹ್ಯಾಪಿ ಸ್ಟೈಲಿಂಗ್!