CSS counter-set అట్రిబ్యూట్

నిర్వచనం మరియు వినియోగం

counter-set అంశం ఒక CSS కౌంటర్ ను సృష్టించడానికి మరియు ప్రత్యేక విలువను సెట్ చేయడానికి ఉపయోగించబడుతుంది.

counter-set అటువంటి అంశాలు counter-increment అంశం మరియు content అంశం తో కలిసి వాడబడతాయి.

ఇన్స్టాన్స్

ఉదాహరణ 1

ఒక కౌంటర్ ను ('my-counter') సృష్టించండి, దానిని 5 గా సెట్ చేయండి మరియు <h2> సెలెక్టర్ ప్రతిసారి దానిని పెంచండి:

body {
  /* "my-counter" ను 5 గా సెట్ చేయండి */
  counter-set: my-counter 5;
}
h2::before {
  /* "my-counter" ను 1 పెంచు */
  counter-increment: my-counter;
  content: "సెక్షన్ " 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: "సెక్షన్ " counter(my-counter) ". ";
}

స్వయంగా ప్రయోగించండి

సెక్షన్లు మరియు ఉప సెక్షన్లు సంఖ్యలు కోసం "Section 10:\

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 content అట్రిబ్యూట్

సూచనలు:CSS counter-increment అట్రిబ్యూట్

సూచనలు:CSS counter() ఫంక్షన్