CSS کاؤنٹر سیٹ پروری

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

counter-set ਵਿਸ਼ੇਸ਼ਤਾ ਕੱਲਾਕਾਰ ਨੂੰ ਬਣਾਉਣ ਅਤੇ ਸਿਫਾਰਸ਼ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ。

counter-set ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸਾਧਾਰਨ ਤੌਰ 'ਤੇ counter-increment ਵਿਸ਼ੇਸ਼ਤਾ ਅਤੇ content ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ。

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਇੱਕ ਅਕਾਲਕ ("my-counter") ਬਣਾਓ ਅਤੇ ਇਸ ਨੂੰ 5 ਸੈਟ ਕਰੋ ਅਤੇ ਹਰ ਵਾਰ <h2> ਚੋਣਕਰਤਾ ਵਿੱਚ ਉਸ ਨੂੰ 1 ਵਧਾਓ:

body {
  /* my-counter ਨੂੰ 5 ਸੈਟ ਕਰੋ */
  counter-set: my-counter 5;
}
h2::before {
  /* "my-counter" ਨੂੰ 1 ਵਧਾਓ */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 2

ਇੱਕ ਅਕਾਲਕ ("my-counter") ਬਣਾਓ ਅਤੇ ਇਸ ਨੂੰ 5 ਸੈਟ ਕਰੋ ਅਤੇ ਹਰ ਵਾਰ <h2> ਚੋਣਕਰਤਾ ਵਿੱਚ ਉਸ ਨੂੰ 1 ਘਟਾਓ:

body {
  /* my-counter ਨੂੰ 5 ਸੈਟ ਕਰੋ */
  counter-set: my-counter 5;
}
h2::before {
  /* my-counter ਨੂੰ 1 ਘਟਾਓ */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 3

ਸੈਕਸ਼ਨ ਅਤੇ ਉਪ-ਸੈਕਸ਼ਨ ਨੰਬਰ ਲਈ "Section 10:"、"10.1"、"10.2" ਆਦਿ ਫਾਰਮੈਟ ਵਰਤੋਂ:

body {
  /* ਸੈਕਸ਼ਨ ਨੂੰ 9 ਸੈਟ ਕਰੋ */
  counter-set: ਸੈਕਸ਼ਨ 9;
}
h1 {
  /* "subsection" ਨੂੰ 0 ਸੈਟ ਕਰੋ */
  counter-set: subsection 0;
}
h1::before {
  /* "section" ਨੂੰ 1 ਵਧਾਓ */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* "subsection" ਨੂੰ 1 ਵਧਾਓ */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 4

ਇੱਕ ਕੌਂਟਰਰ ਬਣਾਓ ਅਤੇ ਇਸ ਨੂੰ 9 ਸੈਟ ਕਰੋ ਅਤੇ ਹਰ ਵਾਰ <h2> ਚੋਣਕਰਤਾ ਨਾਮ ਦੇ ਪ੍ਰਤੀ ਹੋਣ ਉੱਤੇ ਇਸ ਨੂੰ 1 ਵਧਾਓ (ਰੋਮਨ ਨੰਬਰ ਵਜੋਂ):

body {
  /* "my-counter" ਨੂੰ 9 ਸੈਟ ਕਰੋ */
  counter-set: my-counter 9;
}
h2::before {
  /* "my-counter" ਨੂੰ 1 ਵਧਾਓ */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

CSS ਗਰੇਫਟਾਂ

counter-set: none|counter-name number|initial|inherit;

ਪ੍ਰਤੀਕ ਮੁੱਲ

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

ਸਟੇਬਲ ਸਪੋਰਟ ਵਾਲੇ ਪਹਿਲੇ ਬਰਾਉਜ਼ਰ ਐਪਲੀਕੇਸ਼ਨ ਨੰਬਰ ਦੇ ਪ੍ਰਤੀ ਸਟੇਬਲ ਸਪੋਰਟ ਦੇ ਪ੍ਰਤੀ ਪ੍ਰਤੀਕ

ਸਬੰਧਤ ਪੰਨੇ

ਸੰਦਰਭ:::before ਪ੍ਰਿੰਟ ਐਲਮੈਂਟ

ਸੰਦਰਭ:::after ਪ੍ਰਿੰਟ ਐਲਮੈਂਟ

ਸੰਦਰਭ:CSS کنٹینٹ پروری

ਸੰਦਰਭ:CSS کاؤنٹر انکریمنت پروری

ਸੰਦਰਭ:CSS counter() ਫੰਕਸ਼ਨ