What Does .Container.\31 25\25 Mean in CSS

.container {  background: red;  margin: 10px;}.container.\31 25\25 { /* 125% */  width: 100%;  max-width: 1500px;  /* (containers * 1.25) */  min-width: 1200px;  /* (containers * 1.00) */}.container.\37 5\25 { /* 75% */  width: 900px;       /* (containers * 0.75) */}.container.\35 0\25 { /* 50% */  width: 600px;       /* (containers * 0.50) */}.container.\32 5\25 { /* 25% */  width: 300px;       /* (containers * 0.25) */}

<div class="container 125%">125%</div><div class="container 75%">75%</div><div class="container 50%">50%</div><div class="container 25%">25%</div>

What is the meaning of this unconventional CSS code?

CSS identifiers, such as classes and IDs, cannot begin with a digit (0 - 9).

From the spec:

4.1.3 Characters and
case

In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-z, A-Z, 0-9] and ISO
10646 characters U+0080 and higher, plus the hyphen (-) and the
underscore (_); they cannot start with a digit, two hyphens, or a
hyphen followed by a digit.

However, the same section also says this:

Backslash escapes are always considered to be part of an identifier or a string.

This means that, while you cannot start an identifier with a digit, you can use backslash escape code (\foo) that will convert to a digit. Note that this rule applies in CSS, but not HTML, where almost any character combination is an acceptable value.

So that's what you're seeing in your code. Numerical HTML class values that must be escaped to work in CSS. Here are some examples:

• \31 is the Unicode Code Point for the digit one.
• \32 is the Unicode Code Point for the digit two.
• \33 is the Unicode Code Point for the digit three.

Another purpose of the backslash escape in CSS is to cancel the meaning of special characters.

The forward slash (/) has special meaning in CSS. It must, therefore, be escaped for proper use.

So let's now decipher the class names in your code:

.\31\/2, .\32\/4, .\36\/12 { width: 50%; }

The first escape (\31) is Unicode for "1".

The second escape (\/2) cancels the special meaning of the forward slash.

So the HTML looks like this:

class = "1/2"
class = "2/4"
class = "6/12"

Here are a few more from your list:

.\31\/3, .\34\/12 { width: 33.33333%; } /* HTML class values = 1/3, 4/12 */
.\32\/3, .\38\/12 { width: 66.66667%; } /* HTML class values = 2/3, 8/12 */
.\31\/12          { width: 8.33333%;  } /* HTML class value  = 1/12      */
.\35\/12          { width: 41.66667%; } /* HTML class value  = 5/12      */
.\31\30\/12       { width: 83.33333%; } /* HTML class value  = 10/12     */
.\31\31\/12       { width: 91.66667%; } /* HTML class value  = 11/12     */

What does the dot mean in CSS?

A . prefix usually represents a class selector, but if it's immediately followed by whitespace then it's a syntax error.

If I were to hazard a guess, then it's likely the author meant to say .work-container > h3, but missed the Shift key just as he was about to type the > character (the child combinator).

Your second selector, .work-container h3, simply means any h3 that's contained within an element with a class called work-container.

How do I keep the divs side by side in the container?

How about this:

<div class="container">
   <div class="sidenav">
      test
   </div>
   <div class="bgrnd">
      test
   </div>
</div>

CSS:

.container {
    width: 50%;
    height: 50%;
}
.sidenav {
    width: 25%;
    height: 100%;
    background-color: black;
    color: #fff;
    float: left;
}
.bgrnd {
    width: 75%;
    height: 100%;
    background-color: blue;
    color: #fff;
    float: right;
}

HTML container div occupying extra space bellow its child item?

The quick and dirty solution is to just add a negative margin to the parent container:

.container-team {  
  max-width: 1170px;
  width: 100%;
  margin: 0px auto;
  margin-bottom: -25%;
  padding: 0 0px;
  box-sizing: border-box;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

https://codepen.io/anon/pen/eXJNBw?editors=1100

However, the reason you are seeing this extra white space is because you scaled everything by 0.8. Whenever you do a css transform: scale, it creates the layout before doing the scaling, meaning the positioning of the elements is relative to where it was at 1.0 scaling. The reason it's tied to the top is because the css is set to be that way using a transform-origin: top center, which puts the transformed element at the top and center. If you removed this, it would simply scale it all down by 0.8, adding white space to the top and the bottom.

The negative margin fix is fine, but if you want a more robust solution, you should maybe consider scaling each user element down and using margin-left and margin-right instead of scaling the whole thing.

CSS image resize percentage of itself?

I have 2 methods for you.

Method 1. demo on jsFiddle

This method resize image only visual not it actual dimensions in DOM, and visual state after resize centered in middle of original size.

html:

<img class="fake" src="example.png" />

css:

img {
  -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5); /* FF3.5+ */
      -ms-transform: scale(0.5); /* IE9 */
       -o-transform: scale(0.5); /* Opera 10.5+ */
          transform: scale(0.5);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}​

Browser support note: browsers statistics showed inline in css.

Method 2. demo on jsFiddle

html:

<div id="wrap">
    <img class="fake" src="example.png" />
    <div id="img_wrap">
        <img class="normal" src="example.png" />
    </div>
</div>​

css:

#wrap {
    overflow: hidden;
    position: relative;
    float: left;
}

#wrap img.fake {
    float: left;
    visibility: hidden;
    width: auto;
}

#img_wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#img_wrap img.normal {
    width: 50%;
}​

Note: img.normal and img.fake is the same image.

Browser support note: This method will work in all browsers, because all browsers support css properties used in method.

The method works in this way:

1. #wrap and #wrap img.fake have flow
2. #wrap has overflow: hidden so that its dimensions are identical to inner image (img.fake)
3. img.fake is the only element inside #wrap without absolute positioning so that it doesn't break the second step
4. #img_wrap has absolute positioning inside #wrap and extends in size to the entire element (#wrap)
5. The result of the fourth step is that #img_wrap has the same dimensions as the image.
6. By setting width: 50% on img.normal, its size is 50% of #img_wrap, and therefore 50% of the original image size.

What does an asterisk before an equal sign mean (*=) ? What about the exclamation mark?

! is part of !important; it is not a comment. The !important forces a rule to always be applied. It's typically used to override or to prevent your style from being overridden.

The *= means "contains". So in the example, the first line is looking for all children of .nav li ul li a elements with classnames that contain "icol-".

---

Related Topics