What Does & Do in CSS

What does :: and ~ do in css?

The tilde character (~) is the siblings selector

h2 ~ p { color:red; }

for example would make the paragraphs red in the below code

<h2>Heading</h2>
<p>The selector above matches this paragraph.</p>
<p>The selector above matches this paragraph.</p>

the :: is used for ::before and ::after pseudo-elements which together with the content: allow you to put, for example, an icon before every link

a::before { content:url(link.png); }

What does & do in css

You're probably experienced with SASS selector. The ampersand & in sass is used to refer to the parent selector. So in your case & will refer to parent selector which is .user_modal

So &.modal which will be converted to CSS and become .user_modal.modal

so it'll match:

<div class='user_modal modal'></div>

the same way for &.fade.in which will match

<div class='user_modal fade in'></div>

So finally it's just become normal CSS after you've converted it:

.user_modal.modal , .user_modal.fade.in {
    margin-top:0;
    margin-left:0;
    top:83px;
}

What does an & before a pseudo element in CSS mean?

That's LESS, not CSS.

This syntax allows you to nest selector modifiers.

.clearfix { 
  &:before {
    content: '';
  }
}

Will compile to:

.clearfix:before {
  content: '';
}

With the &, the nested selectors compile to .clearfix:before.

Without it, they compile to .clearfix :before.

What does the * do in CSS?

In simple words, its the key to target css on different IE browser versions. It can also be called as an CSS Hack.

#div {
  *zoom: 1; /*Only works on IE7 and below*/
  zoom : 1;
  display: inline;
  *display: inline; /*Only works on IE7 and below*/
}

Means this CSS works only on IE7 and below. It's kind of a hack we can use to apply CSS on IE7 and below.

Here is how to target IE6, IE7, and IE8 Uniquely

#div{  
 color: red; /* all browsers, of course */  
 color : green\9; /* IE8 and below */  
 *color : yellow; /* IE7 and below */  
 _color : orange; /* IE6 */  
} 

CLICK HERE if you want learn more about browser specific CSS.

What does the ~ (tilde/squiggle/twiddle) CSS selector mean?

The ~ selector is in fact the subsequent-sibling combinator (previously called general sibling combinator until 2017):

The subsequent-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.

Consider the following example:

.a ~ .b {
  background-color: powderblue;
}

<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>

In CSS what is the difference between . and # when declaring a set of styles?

Yes, they are different...

# is an id selector, used to target a single specific element with a unique id, but . is a class selector used to target multiple elements with a particular class. To put it another way:

• #foo {} will style the single element declared with an attribute id="foo"
• .foo {} will style all elements with an attribute class="foo" (you can have multiple classes assigned to an element too, just separate them with spaces, e.g. class="foo bar")

Typical uses

Generally speaking, you use # for styling something you know is only going to appear once, for example, things like high level layout divs such sidebars, banner areas etc.

Classes are used where the style is repeated, e.g. say you head a special form of header for error messages, you could create a style h1.error {} which would only apply to <h1 class="error">

Specificity

Another aspect where selectors differ is in their specificity - an id selector is deemed to be more specific than class selector. This means that where styles conflict on an element, the ones defined with the more specific selector will override less specific selectors. For example, given <div id="sidebar" class="box"> any rules for #sidebar with override conflicting rules for .box

Learn more about CSS selectors

See Selectutorial for more great primers on CSS selectors - they are incredibly powerful, and if your conception is simply that "# is used for DIVs" you'd do well to read up on exactly how to use CSS more effectively.

EDIT: Looks like Selectutorial might have gone to the big website in the sky, so try this archive link instead.

What does span {} do in CSS syntax?

the brackets { and } define scope so that

   body {
       color: #000;
   }

Would define that the color (text color) of the body element type (css query selector) would be #000 (which is hex for black)

however, if you have an element in an element like this using a precompiler such as less for css using the less syntax.

    body {
        color: #000;
        span {
            color: #FF0000;
        }
    }

this would do as the previous css did, but in less you can create a hierarchy

the body's color will be set to black as before.
and then any span child of the body element will have its color set to red (#FF0000)

CSS/LESS are used in conjunction with the HTML DOM object model.

---

Related Topics