What Does This Symbol Mean in CSS

What is the purpose of the '@' symbol in CSS?

@ has been around since the days of @import in CSS1, although it's arguably becoming increasingly common in the recent @media (CSS2, CSS3) and @font-face (CSS3) constructs. The @ syntax itself, though, as I mentioned, is not new.

These are all known in CSS as at-rules. They're special instructions for the browser, not directly related to styling of (X)HTML/XML elements in Web documents using rules and properties, although they do play important roles in controlling how styles are applied.

Some code examples:

/* Import another stylesheet from within a stylesheet */
@import url(style2.css);

/* Apply this style only for printing */
@media print {
    body {
        color: #000;
        background: #fff;
    }
}

/* Embed a custom web font */
@font-face {
    font-family: 'DejaVu Sans';
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}

• @font-face rules define custom fonts for use in your designs that aren't always available on all computers, so a browser downloads a font from the server and sets text in that custom font as if the user's computer had the font.

• @media rules, in conjunction with media queries (formerly only media types), control which styles are applied and which aren't based on what media the page is being displayed in. In my code example, only when printing a document should all text be set in black against a white (the paper) background. You can use media queries to filter out print media, mobile devices and so on, and style pages differently for those.

At-rules have no relation to selectors whatsoever. Because of their varying nature, different at-rules are defined in different ways across numerous different modules. More examples include:

• Conditional rules
• Keyframe animations
• Paged media

(this list is far from exhaustive)

You can find another non-exhaustive list at MDN.

What does this symbol mean in CSS?

Universal selector *

• *: What does "*" mean in CSS?

Combinators

• Child >: What does the ">" (greater-than sign) CSS selector mean?
• Following-sibling ~: What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
• Next-sibling +: What does the "+" (plus sign) CSS selector mean?
• ~ vs +: Difference between CSS + selector and ~ selector

Pseudo-classes

• :focus, :active: What is the difference between :focus and :active?
• :root: What's the difference between CSS3's :root pseudo class and html?

Attribute selectors

• [att|=val], [att^=val]: What is the difference between pipe (|) and caret (^) attribute selectors?

Namespaces

• Namespace separator |: What does *|* this mean in CSS?
• @namespace rule: What is the use of @namespace in CSS?

Shadow DOM

• /deep/ combinator, ::shadow pseudo-element: What do /deep/ and ::shadow mean in a CSS selector?

Important declarations

• !important: What are the implications of using "!important" in CSS?

Hacks

• *: What does a star-preceded property mean in CSS?
• :): What does the smiley face ":)" mean in CSS?

What does mean in CSS?

it means that only "first nested" elements will be targeted ("child" elements), for example

   <div id="a">
       <div id="b">
         <div id="c">
       </div>
      </div>
    </div>

if you write

#a div{
 background: red;
}

then both #b and #c will be red, but if you use > like

#a > div{
 background: red;
}

then only #b will be red, #c will not.

What does the ' ' symbol in css mean?

There is no valid symbol as < in CSS. If you use it, you will invalidate your css.

However, you may want to use > - the child selector.

CSS4 will introduce a subject selector. At the moment it is marked with $.

so

$#parent a:hover{
   /* styles */
}

so these rules will not apply to the a in hoverstate, but it's parent with the parent-ID. CSS4 spec

What does the '$' in CSS mean?

Those are SASS (SCSS) variables which store color properties so they can be used later on. Also, to give you a basic concept, SASS is a CSS pre-processor which allows you to nest selectors, use mixins, store values on variables, etc.

You can see it (scss) referenced in the codepen CSS section:

Taken from SASS docs (refer to variables):

Think of variables as a way to store information that you want to
reuse throughout your stylesheet. You can store things like colors,
font stacks, or any CSS value you think you'll want to reuse. Sass
uses the $ symbol to make something a variable. Here's an example:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

If you are wondering the difference between SASS and SCSS, its basically syntax, below taken from docs:

There are two syntaxes available for Sass. The first, known as SCSS
(Sassy CSS) and used throughout this reference, is an extension of the
syntax of CSS. This means that every valid CSS stylesheet is a valid
SCSS file with the same meaning. This syntax is enhanced with the Sass
features described below. Files using this syntax have the .scss
extension.

The second and older syntax, known as the indented syntax (or
sometimes just “Sass”), provides a more concise way of writing CSS. It
uses indentation rather than brackets to indicate nesting of
selectors, and newlines rather than semicolons to separate properties.
Files using this syntax have the .sass extension.

What does the '/' symbol mean in CSS

In that example it means font-size:2px,and line-height:3px. Although I am not sure if that works without the rest of the font rule.

http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/

What does * mean in CSS?

This is a common technique called a CSS reset. Different browsers use different default margins, causing sites to look different by margins. The * means "all elements" (a universal selector), so we are setting all elements to have zero margins, and zero padding, thus making them look the same in all browsers.

What does symbol tilde (~) mean in CSS

http://www.w3.org/TR/selectors/

8.3.2. General sibling combinator

The general sibling combinator is made of the "tilde" (U+007E, ~)
character that separates two sequences of simple selectors. The
elements represented by the two sequences share the same parent in the
document tree and the element represented by the first sequence
precedes (not necessarily immediately) the element represented by the
second one.

example

h1 ~ pre

matches that <pre> here:

<h1>Definition of the function a</h1>
<p>Function a(x) has to be applied to all figures in the table.</p>
<pre>function a(x) = 12x/13.5</pre>

There is also + selector, for adjacent sibling combinator: with h1 + pre the <pre> tag would have to be right after <h1>

What does the (greater-than sign) CSS selector mean?

> is the child combinator, sometimes mistakenly called the direct descendant combinator.¹

That means the selector div > p.some_class only matches paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within. This implies that every element matching div > p.some_class necessarily also matches div p.some_class, with the descendant combinator (space), so the two are understandably often confused.

An illustration comparing the child combinator with the descendant combinator:

div > p.some_class { 
    background: yellow;
}

div p.some_class { 
    color: red;
}

<div>
    <p class="some_class">Some text here</p>     <!-- [1] div > p.some_class, div p.some_class -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- [2] div p.some_class -->
    </blockquote>
</div>