ווי צו שאַפֿן זעברע סטריפּעד טאַבלעס מיט קסס

ניצן: nth-of-type (n) מיט טאַבלעס

צו מאַכן טישן גרינגער צו לייענען, עס איז אָפט נוציק צו נוסח ראָוז מיט אָלטערנייטינג הינטערגרונט פארבן. איינער פון די מערסט פּראָסט וועגן צו סטיל טישן איז צו שטעלן די הינטערגרונט פֿאַרב פון יעדער אנדערע רודערן. דעם איז אָפט ריפערד צו ווי "זעברע מלקות."

איר קענען ויספירן דעם איז דורך באַשטעטיקן יעדער אנדערער רוע מיט אַ קסס קלאַס און דעמאָלט דיפיינינג די נוסח פֿאַר דעם קלאַס. דעם אַרבעט אָבער איז ניט דער בעסטער אָדער רובֿ עפעקטיוו וועג צו גיין וועגן אים.

ווען ניצן דעם אופֿן, יעדער מאָל איר דאַרפֿן צו רעדאַגירן די טיש איר קען האָבן צו רעדאַגירן יעדער איין רודערן אין די טיש צו ענשור יעדער רודערן איז קאָנסיסטענט מיט די ענדערונגען. פֿאַר בייַשפּיל, אויב איר שטעלן אַ נייַ רודערן צו דיין טיש, יעדער אנדערע רודערן ונטער עס דאַרף צו האָבן די סאָרט געביטן.

CSS מאכט עס גרינג צו סטיל טישן מיט זעברע מלקות. איר טאָן ניט דאַרפֿן צו לייגן קיין עקסטרע HTML אַטראַביוץ אָדער CSS קלאסן, איר נאָר נוצן די: נט-פון-טיפּ (s) קסס סעלעקטאָר .

די: nth-of-type (n) סעלעקטאָר איז אַ סטראַקטשעראַל פּסעוודאָ-קלאַס אין קסס אַז אַלאַוז איר צו נוסח עלעמענטן באזירט אויף זייער באציונגען צו פאָטער און סיבלינג עלעמענטן. איר קענען נוצן עס צו אויסקלייַבן איינער אָדער מער עלעמענטן באזירט אויף זייער מקור סדר. אין אנדערע ווערטער, עס קענען גלייַכן יעדער עלעמענט וואָס איז די קינד פון אַ באַזונדער טיפּ פון זייַן פאָטער.

די בריוו N קען זיין אַ קיווערד (אַזאַ ווי מאָדנע אָדער אפילו), אַ נומער, אָדער אַ פאָרמולע.

פֿאַר בייַשפּיל, צו מאָדע יעדער אנדערע פּאַראַגראַף פאַרבינדן מיט אַ געל הינטערגרונט פֿאַרב, דיין CSS דאָקומענט וואָלט אַרייַננעמען:

p: nth-of-type (odd) {
הינטערגרונט: געל;
}

אָנהייבן מיט דיין HTML טיש

ערשטער, מאַכן דיין טיש ווי איר וואָלט נאָרמאַלי שרייַבן עס אין HTML. דו זאלסט נישט לייגן קיין ספּעציעל קלאסן צו די ראָוז אָדער שפאלטן.

אין דיין סטיילז, שטעלן די פאלגענדע קסס:

tr: nth-of-type (odd) {
background-color: # ccc;
}

דעם וועט מאָדע יעדער אנדערע רודערן מיט אַ גרוי הינטערגרונט פֿאַרב סטאַרטינג מיט די ערשטער רודערן.

נוסח אַלטערנאַטינג קאָלומנס אין די זעלבע וועג

איר קענען טאָן די זעלבע טיפּ פון סטילינג צו שפאלטן אין דיין טישן. צו טאָן אַזוי, פשוט טוישן די טר אין דיין קסס קלאַס צו טד. פֿאַר בייַשפּיל:

td: nth-of-type (odd) {
background-color: # ccc;
}

ניצן פאָרמולאַס אין אַ נט-פון-טיפּ (ן) סעלעקטאָר

דער סינטאַקס פֿאַר אַ פאָרמולע געניצט אין דער סעלעקטאָר איז אַ + ב.

פֿאַר בייַשפּיל, אויב איר ווילן צו שטעלן אַ הינטערגרונט פֿאַרב פֿאַר יעדער 3 רודערן, דיין פאָרמולע איז 3 ן 0. דיין CSS זאל קוקן ווי דאָס:

tr: nth-of-type (3n + 0) {
background: slategray;
}

נוציק מכשירים פֿאַר ניצן נט-פון-טיפּ סעלעקטאָר

אויב איר האָט אַ קליין דאָנטאַנטלי פון די פאָרמולע אַספּעקט פון ניצן די פּסעוודאָ קלאַס פון דעם טיפּ פון סעלעקטאָר, פּרוּווט: nth Tester פּלאַץ ווי אַ נוציק געצייַג אַז קענען העלפן איר דעפינירן דעם סינטאַקס צו דערגרייכן די קוק איר ווילן. ניצן די דראָפּדאָוון מעניו צו אויסקלייַבן נט-פון-טיפּ (איר קענען אויך עקספּערימענט מיט אנדערע פּסעוודאָ-קלאסן דאָ, אויך, אַזאַ ווי נטה-קינד).