Use CSS Counter in Calc

Use css counter in calc

The Question Can I use the counter(skill) inside a calc()

No. You can't.

The calc function does not permit the use of counter functions as its components. From the specs here - https://www.w3.org/TR/css3-values/#calc-notation:

Components of a
calc() expression
can be literal values or
attr() or
calc()
expressions.

There have been many requests for this but always declined. The underlying reason seems to be that the counter() function represents (outputs) a <string> and hence cannot be used directly in calc. Moreover, the counters are considered very expensive for the browsers.

Reference: https://lists.w3.org/Archives/Public/www-style/2016Aug/0082.html

However, there have been proposals for adding a counter-value() function which would return the value as integer and could be used in calc. See here: https://drafts.csswg.org/css-lists-3/#counter-functions (Scroll down to see Issue 4).

So as of now, you cannot use counter inside of calc and the counter-value does not exist yet.

Getting CSS Variables to Add Correctly using calc()

because when doing #century-*:checked~ #century_result you only assign the value to #century_result so #result will get nothing. You need to target both element so simply do #century-*:checked ~ * (same logic with #month_result)

:root {
  --isLeapYear: 0;
  /* Determinant to be worked out later, set as 0 for now */
  /* Month registers */
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 0;
  /* Century keys */
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  --century: 0;
  --month: 0;
  --result: 0;
  --borderBlack: 1px solid black;
  --selectedColor: #007ec2;
}

[type="radio"],
[type="checkbox"] {
  display: none;
}

.century+label,
.month+label {
  padding-left: 4px;
  padding-right: 4px;
  height: 16px;
  border-left: var(--borderBlack);
  border-right: var(--borderBlack);
  font: 400 13.3333px Arial;
  display: inline-block;
  background-color: white;
  color: black;
}

.century+label {
  width: 20px;
  left: 5px;
  top: 5px;
}

.month+label {
  width: 80px;
  position: relative;
  left: 73px;
  top: -224px;
}

label[for="month-01"],
label[for="century-18"] {
  border-top: var(--borderBlack);
}

label[for="month-12"],
label[for="century-29"] {
  border-bottom: var(--borderBlack);
}

input:checked+label {
  background-color: var(--selectedColor);
  color: white;
}

/* Century Keys */

#century-18:checked~ * {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 1;
  --ck0: 0;
  /* 2 */
}

#century-19:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 0;
  --ck0: 0;
  /* 0 */
}

#century-20:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  /* 6*/
}

#century-21:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 0;
  --ck0: 0;
  /* 4 */
}

#century-22:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 1;
  --ck0: 0;
  /* 2 */
}

#century-23:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 0;
  --ck0: 0;
  /* 0 */
}

#century-24:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  /* 6 */
}

#century-25:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 0;
  --ck0: 0;
  /* 4 */
}

#century-26:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 1;
  --ck0: 0;
  /* 2 */
}

#century-27:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 0;
  --ck0: 0;
  /* 0 */
}

#century-28:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  /* 6 */
}

#century-29:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 0;
  --ck0: 0;
  /* 4 */
}

/* Month Keys */

.month[value="1"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: calc(1 - var(--isLeapYear));
}

.month[value="2"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: calc(1 - var(--isLeapYear));
  --m1: var(--isLeapYear);
  --m0: var(--isLeapYear);
}

.month[value="3"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 0;
  --m0: 0;
}

.month[value="4"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 0;
}

.month[value="5"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 1;
  --m0: 0;
}

.month[value="6"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 0;
  --m0: 1;
}

.month[value="7"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 0;
}

.month[value="8"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 1;
  --m0: 1;
}

.month[value="9"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 1;
  --m0: 0;
}

.month[value="10"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 1;
}

.month[value="11"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 0;
  --m0: 0;
}

.month[value="12"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 1;
  --m0: 0;
}

.century:checked~* {
  font-family: Courier;
  font-weight: 700;
  --century: calc(var(--ck7) * 128 + var(--ck6) * 64 + var(--ck5) * 32 + var(--ck4) * 16 + var(--ck3) * 8 + var(--ck2) * 4 + var(--ck1) * 2 + var(--ck0));
}

#century_result:after {
  counter-reset: C7 var(--ck7) C6 var(--ck6) C5 var(--ck5) C4 var(--ck4) C3 var(--ck3) C2 var(--ck2) C1 var(--ck1) C0 var(--ck0) CENTURY 0;
  counter-increment: CENTURY var(--century);
  content: "C" counter(C7) counter(C6) counter(C5) counter(C4) counter(C3) counter(C2) counter(C1) counter(C0) " = " counter(CENTURY)
}

.month:checked~#month_result {
  font-family: Courier;
  font-weight: 700;
  --month: calc(var(--m7) * 128 + var(--m6) * 64 + var(--m5) * 32 + var(--m4) * 16 + var(--m3) * 8 + var(--m2) * 4 + var(--m1) * 2 + var(--m0));
}

#month_result:after {
  counter-reset: M7 var(--m7) M6 var(--m6) M5 var(--m5) M4 var(--m4) M3 var(--m3) M2 var(--m2) M1 var(--m1) M0 var(--m0) MONTH 0;
  counter-increment: MONTH var(--month);
  content: "M" counter(M7) counter(M6) counter(M5) counter(M4) counter(M3) counter(M2) counter(M1) counter(M0) " = " counter(MONTH)
}

#result {
  font-family: Courier;
  font-weight: 700;
  --century: calc(var(--ck7) * 128 + var(--ck6) * 64 + var(--ck5) * 32 + var(--ck4) * 16 + var(--ck3) * 8 + var(--ck2) * 4 + var(--ck1) * 2 + var(--ck0));
  --month: calc(var(--m7) * 128 + var(--m6) * 64 + var(--m5) * 32 + var(--m4) * 16 + var(--m3) * 8 + var(--m2) * 4 + var(--m1) * 2 + var(--m0));
  --result: calc(var(--century) + var(--month));
}

#result:after {
  counter-reset: RESULT 0;
  counter-increment: RESULT var(--result);
  content: "R = " counter(RESULT);
}

#century_result {
  position: absolute;
  top: 240px;
}

#month_result {
  position: absolute;
  top: 265px;
}

#result {
  position: absolute;
  top: 290px;
}
<input id="century-18" name="century" class="century" type="radio" value="18" /><label for="century-18">18</label><br />
<input id="century-19" name="century" class="century" type="radio" value="19" /><label for="century-19">19</label><br />
<input id="century-20" name="century" class="century" type="radio" value="20" checked="checked" /><label for="century-20">20</label><br />
<input id="century-21" name="century" class="century" type="radio" value="21" /><label for="century-21">21</label><br />
<input id="century-22" name="century" class="century" type="radio" value="22" /><label for="century-22">22</label><br />
<input id="century-23" name="century" class="century" type="radio" value="23" /><label for="century-23">23</label><br />
<input id="century-24" name="century" class="century" type="radio" value="24" /><label for="century-24">24</label><br />
<input id="century-25" name="century" class="century" type="radio" value="25" /><label for="century-25">25</label><br />
<input id="century-26" name="century" class="century" type="radio" value="26" /><label for="century-26">26</label><br />
<input id="century-27" name="century" class="century" type="radio" value="27" /><label for="century-27">27</label><br />
<input id="century-28" name="century" class="century" type="radio" value="28" /><label for="century-28">28</label><br />
<input id="century-29" name="century" class="century" type="radio" value="29" /><label for="century-29">29</label><br />

<input id="month-01" name="month" class="month" type="radio" value="1" checked="checked" /><label for="month-01">January</label><br />
<input id="month-02" name="month" class="month" type="radio" value="2" /><label for="month-02">February</label><br />
<input id="month-03" name="month" class="month" type="radio" value="3" /><label for="month-03">March</label><br />
<input id="month-04" name="month" class="month" type="radio" value="4" /><label for="month-04">April</label><br />
<input id="month-05" name="month" class="month" type="radio" value="5" /><label for="month-05">May</label><br />
<input id="month-06" name="month" class="month" type="radio" value="6" /><label for="month-06">June</label><br />
<input id="month-07" name="month" class="month" type="radio" value="7" /><label for="month-07">July</label><br />
<input id="month-08" name="month" class="month" type="radio" value="8" /><label for="month-08">August</label><br />
<input id="month-09" name="month" class="month" type="radio" value="9" /><label for="month-09">September</label><br />
<input id="month-10" name="month" class="month" type="radio" value="10" /><label for="month-10">October</label><br />
<input id="month-11" name="month" class="month" type="radio" value="11" /><label for="month-11">November</label><br />
<input id="month-12" name="month" class="month" type="radio" value="12" /><label for="month-12">December</label><br />

<div id="century_result"></div>
<div id="month_result"></div>
<div id="result"></div>

CSS - Use counter() number as property's value

It only works inside the content property, not like a variable the way you are thinking of it. If you view it in DevTools or the like, it's not an integer. You'd still see counter(myCounter) in there.

"In CSS 2.1, the values of counters can only be referred to from the 'content' property." source

Using css calc() with step

Did you consider flexbox?

body {  font-family: 'Alegreya Sans', sans-serif;  margin: 0;  padding: 0;}.container {  margin: 20px auto;}.progressbar {  margin: 0;  padding: 0;  counter-reset: step;  display: flex;}.progressbar li {  list-style-type: none;  flex: 1;  font-size: 12px;  position: relative;  text-align: center;  text-transform: uppercase;  color: #7d7d7d;}.progressbar li:before {  width: 30px;  height: 30px;  content: counter(step);  counter-increment: step;  line-height: 30px;  border: 2px solid #7d7d7d;  display: block;  text-align: center;  margin: 0 auto 10px auto;  border-radius: 50%;  background-color: white;}.progressbar li:after {  width: 100%;  height: 2px;  content: '';  position: absolute;  background-color: #7d7d7d;  top: 15px;  left: -50%;  z-index: -1;}.progressbar li:first-child:after {  content: none;}.progressbar li.active {  color: green;}.progressbar li.active:before {  border-color: #55b776;}.progressbar li.active + li:after {  background-color: #55b776;}
<h1>Four Steps</h1><div class="container">  <ul class="progressbar">    <li class="active">login</li>    <li>choose interest</li>    <li>add friends</li>    <li>View map</li>  </ul></div><h1> Seven Steps</h1>
<div class="container">  <ul class="progressbar">    <li class="active">login</li>    <li>choose interest</li>    <li>add friends</li>    <li>remove</li>    <li>fix users</li>    <li>review</li>    <li>save all</li>  </ul></div>

Is it possible to use CSS Counters To Increment The Rotation Of An Element

No.

[Counter values] can be used with the ‘counter()’ and ‘counters()’ functions. ... [They] can be used by an author anywhere that accepts a <string>.

—CSS Lists Module Level 3

And rotate() doesn't accept a <string>:

‘rotate()’ = rotate( [ <angle> | <zero> ] )

—CSS Transforms Module Level 1

I thought maybe we could get around that with calc(), since it can be used in place of an <angle>, but

Components of a calc() expression can be literal values or ‘attr()’ or ‘calc()’ expressions.

—CSS Values and Units Module Level 3

No <string>s, so that still won't work.

CSS calc() and CSS Variables (Decimals and Division)

@TemaniAfif is right: the problem here is that calc division (at least in August 2018) always returns a float, and counter-reset (as well as many other CSS properties) only works with integer values. There's an issue on csswg-drafts for that:

Right now, calc() carefully tracks whether a numeric expression (no
units or %s) is guaranteed to resolve to an integer, or might resolve
to a more general number. This allows it to be used in places like
z-index safely.

However, it excludes some expressions that would be integral if
evaluated - for example, any division makes it non-integral, even in
an expression like calc(4 / 2).

Essentially, this proposal was accepted, but it seems to be not implemented in browsers - yet. For example, the relevant Chromium issue (which, to be precise, is about inability to use calc division result as param of CSS Grid) has been opened just two weeks ago.

Using n inside calc

You can't, as mentioned by @SLaks. But this can be solved by placing each next element inside the previous one.

See with divs:

div {  margin-left: 46px}
<div>test  <div>test    <div>test      <div>test</div>    </div>  </div></div>

Using css counters how do I create a class that can have the initial value of the counter set?

You can supply an arbitrary starting value to counter-reset, but you'd need to do this with each pre element using its inline style attribute, and you'd need to supply a number 1 less than your desired starting line number:

pre { counter-reset: line; }code { counter-increment: line; }code::before { content: counter(line); float: left; margin: 0 1ch; }
<pre style="counter-reset: line 6"><code>Line of code</code></pre>

Is it possible to use child index in calc in CSS?

NOTE: This answer does NOT use basic CSS, but rather shows an example of using a SASS @for loop to avoid handwriting each rule. If OP does not have GULP or another way to compile the SASS/SCSS, there are online compilers such as SassMeister or using CodePen, changing the settings on the CSS box to add a preprocessor:

Sample Image

And then viewing the compiled CSS:

Sample Image

@for $i from 1 to 12 {
    .parent > div:nth-child( #{$i}) {
        background-color: rgb($i * 20, 255, 255);
    }
}

You can enter the total number of children as the last value (the 12 in this example. This will output:

.parent > div:nth-child(1) {
  background-color: #14ffff;
}

.parent > div:nth-child(2) {
  background-color: #28ffff;
}

.parent > div:nth-child(3) {
  background-color: #3cffff;
}

.parent > div:nth-child(4) {
  background-color: #50ffff;
}

.parent > div:nth-child(5) {
  background-color: #64ffff;
}

.parent > div:nth-child(6) {
  background-color: #78ffff;
}

.parent > div:nth-child(7) {
  background-color: #8cffff;
}

.parent > div:nth-child(8) {
  background-color: #a0ffff;
}

.parent > div:nth-child(9) {
  background-color: #b4ffff;
}

.parent > div:nth-child(10) {
  background-color: #c8ffff;
}

.parent > div:nth-child(11) {
  background-color: #dcffff;
}

Related Topics

Align Two Divs Horizontally Side by Side Center to The Page Using Bootstrap CSS

Post from an <A> Tag

CSS Replacement for <Div Align="Center">

How to Apply CSS and Styling to a React Component

Arrange 2 Items Per Row Using Flexbox

After Pseudo Element Not Appearing in Code

Link External CSS File Only for Specific Div

CSS Nth-Match Doesn't Work

How to Get The Parent Url from an Iframe's Content

Force External Download Url

Fixed Positioning/Z-Index Issue in Mobile Safari

HTML Not Loading CSS

Pseudo Elements Breaking Justify-Content: Space-Between in Flexbox Layout

Jquery Datepicker Won't Work on a Ajax Added HTML Element

Does HTML5 Change The Standard for HTML Commenting

How to Make Link Not Change Color After Visited

Iframe 100% Height Inside Body with Padding

Youtube Url in Video Tag


Leave a reply



Submit