CSS counter() ਫੰਕਸਨ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

counter() ਫੰਕਸਨ ਵਿਸ਼ੇਸ਼ ਕੌਂਟਰਰ ਦਾ ਮੌਜੂਦਾ ਮੁੱਲ ਚਿੰਨ੍ਹ ਰੂਪ ਵਿੱਚ ਵਾਪਸ ਦਿੰਦਾ ਹੈ。

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਪੰਨੇ ਲਈ ਕੌਂਟਰਰ ਬਣਾਓ (body ਚੋਣਕਰ ਵਿੱਚ)। ਹਰੇਕ <h2> ਤੱਤ ਨੂੰ ਕੌਂਟਰਰ ਦਾ ਮੁੱਲ ਜੋੜੋ ਅਤੇ ਹਰੇਕ <h2> ਤੱਤ ਤੋਂ ਪਹਿਲਾਂ "ਦੂਜੇ ਚਾਪ" ਦੇ ਟੈਕਸਟ ਨੂੰ ਜੋੜੋ:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 2

ਕੌਂਟਰਰ ਦੀ ਸਟਾਈਲ ਸੈਟ ਕਰੋ:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section, upper-roman) ": ";
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

CSS ਗਰੰਥ

counter(countername, counterstyle)
ਮੁੱਲ ਵਰਣਨ
countername

ਲਾਜ਼ਮੀ। ਕੌਂਟਰਰ ਦਾ ਨਾਮ (ਜੋ ਕਿ counter-reset ਅਤੇ counter-increment ਅਤੇਰੀਆਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ)。

ਧਿਆਨ ਦੇਵੋ, ਨਾਮ ਅੰਕੜੇ ਵਿੱਚ ਪੱਖਾ ਹੈ。

counterstyle

ਚੋਣੀ ਹੋ ਸਕਦੀ ਹੈ। ਕੌਂਟਰਰ ਦੀ ਸਟਾਈਲ (ਜੋ ਕਿ list-style-type ਦਾ ਮੁੱਲ ਹੋ ਸਕਦਾ ਹੈ, @counter-style ਦਾ ਨਾਮ ਜਾਂ symbols() ਫੰਕਸਨ ਹੋ ਸਕਦਾ ਹੈ)。

ਮੂਲ ਮੁੱਲ ਦਸੈਂਟਲ ਹੈ。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਵਰਜਨ: ਸੀਐੱਸਐੱਸ3

ਬਰਾਊਜ਼ਰ ਸਪੋਰਟ

ਚਰੋਮੇ ਐਜ਼ ਫ਼ਾਇਰਫ਼ਾਕਸ ਸਫ਼ਾਰੀ ਓਪਰਾ
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ

ਸਬੰਧਤ ਪੰਨੇ

ਟੂਰੀਅਲ:CSS ਕੌਂਟਰ

ਸਬੰਧਤੀਕਰਨ:CSS کنٹینٹ پراپریٹی

ਸਬੰਧਤੀਕਰਨ:CSS کاؤنٹر انکریمنت پراپریٹی

ਸਬੰਧਤੀਕਰਨ:CSS کاؤنٹر ریست پراپریٹی

ਸਬੰਧਤੀਕਰਨ:CSS @counter-style ਰੂਲ

ਸਬੰਧਤੀਕਰਨ:CSS counters() ਫੰਕਸ਼ਨ