ಒಂದು ಸಿಎಸ್ಎಸ್ ವಂಶಸ್ಥ ಆಯ್ಕೆ ಯಾವುದು?

ಒಂದು HTML ಡಾಕ್ಯುಮೆಂಟ್ನ ರಚನೆಯು ಒಂದು ಕುಟುಂಬ ಮರವನ್ನು ಹೋಲುತ್ತದೆ. ನಿಮ್ಮ ಕುಟುಂಬದಲ್ಲಿ, ನಿಮ್ಮ ಹೆತ್ತವರು ಮತ್ತು ನಿಮ್ಮ ಮುಂದೆ ಬರುವ ಇತರರು ನಿಮ್ಮಲ್ಲಿದ್ದಾರೆ. ಇವು ನಿಮ್ಮ ಪೂರ್ವಜರು. ಆ ಮರದ ಮೇಲೆ ಮಕ್ಕಳು ಮತ್ತು ನಿಮ್ಮ ಬಳಿಗೆ ಬರುವವರು ನಿಮ್ಮ ವಂಶಸ್ಥರು. ಇದೇ ರೀತಿಯಲ್ಲಿ ಎಚ್ಟಿಎಮ್ಎಲ್ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಇತರ ಅಂಶಗಳ ಒಳಗೆ ಇರುವ ಅಂಶಗಳು ಅವರ ವಂಶಸ್ಥರು. ಉದಾಹರಣೆಗೆ, ಪ್ರತಿಯೊಂದು HTML ಅಂಶವು ಟ್ಯಾಗ್ಗಳ ಒಳಗಿನಿಂದಲೂ, ಅವರು ಅಂಶಗಳ ವಂಶಸ್ಥರಾಗಿದ್ದಾರೆ. ನೀವು CSS ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿದಾಗ ಮತ್ತು ದೃಶ್ಯ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ನಿರ್ದಿಷ್ಟ ಅಂಶಗಳನ್ನು ಗುರಿಯಾಗಿಟ್ಟುಕೊಳ್ಳಬೇಕಾದರೆ ಈ ಸಂಬಂಧವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ.

ಸಿಎಸ್ಎಸ್ ವಂಶಸ್ಥರು ಆಯ್ಕೆ

ಒಂದು ಸಿಎಸ್ಎಸ್ ವಂಶಸ್ಥ ಸೆಲೆಕ್ಟರ್ ಮತ್ತೊಂದು ಅಂಶದೊಳಗೆ ಇರುವ ಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ (ಅಥವಾ ಹೆಚ್ಚು ನಿಖರವಾಗಿ ಹೇಳುವುದಾದರೆ, ಇನ್ನೊಂದು ಅಂಶದ ವಂಶಸ್ಥರು). ಉದಾಹರಣೆಗೆ, ಅನಿಯಂತ್ರಿತ ಪಟ್ಟಿಯು ವಂಶಸ್ಥರು ಎಂದು ಟ್ಯಾಗ್ಗಳೊಂದಿಗೆ ಟ್ಯಾಗ್ ಹೊಂದಿದೆ. ಕೆಳಗಿನ ಉದಾಹರಣೆಯನ್ನು ಈ ಕೆಳಗಿನ HTML ಅನ್ನು ಉಪಯೋಗಿಸೋಣ:

• ಇದು ಲಿಂಕ್ ಆಗಿದೆ

  LI ಟ್ಯಾಗ್ಗಳು UL ಟ್ಯಾಗ್ನ ವಂಶಸ್ಥರು. ಎ ಟ್ಯಾಗ್ LI (ಮಕ್ಕಳ ವಂಶಸ್ಥರು) ಮತ್ತು UL (ಮೊಮ್ಮಗ ವಂಶಸ್ಥ) ಟ್ಯಾಗ್ಗಳ ವಂಶಸ್ಥರು. ಕುಟುಂಬ ವೃಕ್ಷದ ಉದಾಹರಣೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಇದನ್ನು ಕುರಿತು ಯೋಚಿಸಿದರೆ,

  ಪೋಷಕರಾಗಿದ್ದರೆ,
  • ಆ ಅಂಶದ ಮಗುವಾಗಿದ್ದು,
  • ನ ಮಗು ಮತ್ತು ಮೊಮ್ಮಕ್ಕಳು
    .

    ಆದ್ದರಿಂದ ಈ ವಂಶಸ್ಥರು ಆಯ್ಕೆ ಮಾಡುವ ಮೂಲಕ ವೆಬ್ ಪುಟದಲ್ಲಿ ನಿರ್ದಿಷ್ಟವಾದ ಅಂಶಗಳನ್ನು ನೀವು ಹೇಗೆ ಗುರಿಯಾಗಿರಿಸುತ್ತೀರಿ? ಮೊದಲನೆಯದಾಗಿ, ಸ್ಥಳಗಳನ್ನು ಬೇರ್ಪಡಿಸಿ ಎರಡು (ಅಥವಾ ಹೆಚ್ಚಿನ) ಟೈಪ್ ಆಯ್ಕೆ ಮಾಡುವ ಮೂಲಕ ವಂಶಸ್ಥರು ಆಯ್ಕೆ ಮಾಡುವವರನ್ನು ನೀವು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕು.

    li {text-decoration: none; }

    ಆ ಉದಾಹರಣೆಯಲ್ಲಿ, ಶೈಲಿಗಳು ಪಟ್ಟಿ ಅಂಶ ಅಂಶ (

    • ) ವಂಶಸ್ಥರಾಗಿರುವ ಲಿಂಕ್ ಅಂಶಕ್ಕೆ () ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತವೆ. ಪಟ್ಟಿಯ ಐಟಂನ ವಂಶಸ್ಥರಲ್ಲದ ಪುಟದಲ್ಲಿನ ಎಲ್ಲಾ ಇತರ ಲಿಂಕ್ಗಳು ​​ಈ ಶೈಲಿಯನ್ನು ಪಡೆಯುವುದಿಲ್ಲ.

      ನೆನಪಿಟ್ಟುಕೊಳ್ಳಲು ಒಂದು ಪ್ರಮುಖ ವಿಷಯವೆಂದರೆ, ನಿಮ್ಮ ವಂಶಸ್ಥ ಸೆಲೆಕ್ಟರ್ನಲ್ಲಿ ನೀವು ಬಳಸಬಹುದಾದ ಟ್ಯಾಗ್ಗಳ ನಡುವೆ ಅವರು ಎಷ್ಟು ಟ್ಯಾಗ್ಗಳನ್ನು ಹೊಂದಿದ್ದಾರೆ ಎನ್ನುವುದರ ವಿಷಯವಲ್ಲ. ಎರಡನೆಯ ಅಂಶವು ಮೊದಲ ಅಂಶದೊಳಗೆ ಎಲ್ಲಿಯಾದರೂ ಆವರಿಸಿದರೆ ಅದನ್ನು ವಂಶಸ್ಥರೆಂದು ಆಯ್ಕೆ ಮಾಡಲಾಗುತ್ತದೆ.

      ಉಲ್ ಅಂಶಗಳಿಂದ ಬಂದ ಎಲ್ಲಾ ನಿರ್ವಾಹಕರನ್ನು ನೀವು ಆಯ್ಕೆ ಮಾಡಲು ಬಯಸಿದರೆ, ನೀವು ಹೀಗೆ ಬರೆಯುತ್ತೀರಿ:

      ಉಲ್ {text-decoration: none; }

      ಈಗ, ಈ ಶೈಲಿಗಳು ಪಟ್ಟಿ ಐಟಂನ ವಂಶಸ್ಥರಾದ ಯಾವುದೇ ಲಿಂಕ್ಗೆ ಅನ್ವಯಿಸುತ್ತದೆ. ನೀವು ಈ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬರೆಯಬಹುದು

      ಉಲ್ ಲೀ ಎ {ಟೆಕ್ಸ್ಟ್-ಅಲಂಕಾರ: ಯಾವುದೂ ಇಲ್ಲ; }

      ಇದು ಎರಡು ರೀತಿಯ ಆಯ್ಕೆದಾರರನ್ನು ಬಳಸುವ ವಂಶಸ್ಥ ಸೆಲೆಕ್ಟರ್ ಆಗಿದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಇದು ಪಟ್ಟಿಯ-ಐಟಂಗಳ ಒಳಗೆ ಮತ್ತು ಅನಿಯಂತ್ರಿತ ಪಟ್ಟಿಯ ಒಳಗೆ ಇರುವ ಲಿಂಕ್ಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ.

      ವರ್ಗ ಆಯ್ಕೆದಾರರು ಮತ್ತು ID ಆಯ್ಕೆಗಳನ್ನು ಬಳಸುವುದು

      ನೀವು ಇಳಿಯುತ್ತಿರುವಿರಿ ಎಂದು ಆಯ್ಕೆ ಮಾಡುವವರು ಯಾವಾಗಲೂ ವಂಶಜರು ಎಂದು ಹೊಂದಿಲ್ಲ. ಉದಾಹರಣೆಗೆ, ನೀವು "ಬಿಲ್ಬೋರ್ಡ್" ಯ ID ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಸೈಟ್ನ ಪ್ರದೇಶವನ್ನು (ವಿಭಾಗದಂತೆ) ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಆ ID ಯ ವಂಶಸ್ಥ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ನೀವು ಹೊಂದಿಸಬಹುದು:

      # ಬಿಲ್ಬೋರ್ಡ್ ಉಲ್ {background-color: #ccc; }

      ಇದು "ಬಿಲ್ಬೋರ್ಡ್" ಯ ID ಯೊಂದಿಗೆ ಒಂದು ಅಂಶದ ವಂಶಸ್ಥರೆಂದು ಗುರುತಿಸದ ಪಟ್ಟಿಯ ಶೈಲಿಯಾಗಿದೆ. ನೀವು ವರ್ಗ ಮೌಲ್ಯಗಳಿಗೆ ಒಂದೇ ರೀತಿ ಮಾಡಬಹುದು.

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

      ವಿಭಾಗವು "ಬಿಲ್ಬೋರ್ಡ್" ನ ವರ್ಗ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದೆ ಎಂದು ಇದು ಊಹಿಸುತ್ತದೆ. ಮೇಲಿನ ಸಿಎಸ್ಎಸ್ ಈ ವರ್ಗ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿರುವ ಯಾವುದೇ ವಿಭಾಗದ ಒಳಗೆ

      ಅಂಶವನ್ನು ಶೈಲಿಯಾಗಿರುತ್ತದೆ.

      ನೀವು ನಿಜವಾಗಿಯೂ ವಂಶಸ್ಥರು ಆಯ್ಕೆ ಮಾಡುವವರೊಂದಿಗೆ ಭಾರೀ-ಕೈಯಿಂದ ಮತ್ತು ಶಬ್ದಸಂಗ್ರಹವನ್ನು ಪಡೆಯಬಹುದು. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ HTML ಕೋಡ್ ಅನ್ನು ಬರೆಯಲು ನೀವು ಡ್ರೀಮ್ವೇವರ್ ಅನ್ನು ಬಳಸಿದರೆ, ಆ ಹೊಸ ಪುಟದ ನಿಯಮಗಳನ್ನು ಸೇರಿಸಿದಾಗ ಅದು ಆ ಪುಟದಲ್ಲಿ ನಿಮ್ಮ ಕರ್ಸರ್ನ ಸ್ಥಾನವನ್ನು ಆಧರಿಸಿ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಸ್ವಯಂ-ರಚಿಸುತ್ತದೆ. ಈ ನಿದರ್ಶನಗಳಲ್ಲಿ ಡ್ರೀಮ್ವೇವರ್ ಏನು ಮಾಡಿದ್ದಾನೆ ಎನ್ನುವುದು ಹುಚ್ಚಾಸ್ಪದ ಮತ್ತು ದೀರ್ಘವಾದ ವಂಶಸ್ಥ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ಕೆಲಸ ಮಾಡಲು ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟತೆಯ ಅಗತ್ಯವಿರುವುದಿಲ್ಲ. ನೀವು ಏನು ಮಾಡಲು ಬಯಸುತ್ತೀರಿ ಎನ್ನುವುದು ವಂಶಸ್ಥ ಸೆಲೆಕ್ಟರ್ನ ನಡುವೆ ಸಮತೋಲನವನ್ನು ಕಂಡುಹಿಡಿಯುತ್ತದೆ, ಇದರಿಂದಾಗಿ ನೀವು ಅಗತ್ಯವಿರುವ ನಿಖರವಾದ ಅಂಶಗಳಿಗೆ (ನೀವು ಪರಿಣಾಮ ಬೀರಲು ಬಯಸುವಿರಾ ಇಲ್ಲವೆ) ವಿನ್ಯಾಸಗೊಳಿಸಬೇಕಾದ ಸಿಎಸ್ಎಸ್ ನಿಯಮಗಳನ್ನು ಮಾಡದೆಯೇ ನೀವು ದುರ್ಬಲಗೊಳಿಸಬಹುದು. ದೊಡ್ಡದು.