What Does The * CSS Operator Do? Are There Any Other CSS Operators

What does the * CSS operator do? Are there any other CSS operators?

* is the universal selector. It selects any element.

However, it's a simple selector, and as such it doesn't belong in the same family as what are called combinators (which indicate relationships between two elements). > is the child combinator, which as you say defines a parent-child relationship between two elements.

The spaces between ul#navlist and li, li and *, etc are all descendant combinators. Unlike >, the space doesn't indicate a parent-child relationship; it just asks for an element that's contained somewhere within, whether it's a child, grandchild, great-grandchild, etc, but not a sibling.

The difference between these two selectors (from your link):

ul#navlist li > a:link, ul#navlist li > a:visited
ul#navlist li * a:link, ul#navlist li * a:visited

Is that the first one with > asks for a:link and a:visited elements

that sit directly within ul#navlist li elements,

while the second one with * asks for a:link and a:visited elements

that sit within any element that's within ul#navlist li.

In other words, a:link, a:visited that's not directly within ul#navlist li.

what does *margin-top imply in css?

This is called a CSS hack. Its intent is to target specific versions of IE:

The *<property> is used to target IE7 (and below).

This aticle for NetTuts explains it well

What does this operator (::) in CSS mean?

It indicates that what follows is a "pseudo-element". From the CSS Selectors level 3 spec:

A pseudo-element is made of two colons (::) followed by the name of
the pseudo-element.

And a pseudo-element creates an "abstraction about the document tree":

Pseudo-elements create abstractions about the document tree beyond
those specified by the document language. For instance, document
languages do not offer mechanisms to access the first letter or first
line of an element's content. Pseudo-elements allow authors to refer
to this otherwise inaccessible information. Pseudo-elements may also
provide authors a way to refer to content that does not exist in the
source document (e.g., the ::before and ::after pseudo-elements give
access to generated content).

For example, the ::webkit-scrollbar pseudo-element provides a mechanism to refer to the webkit scrollbar, which would be otherwise inaccessible. Another example: the ::first-letter pseudo-element provides a way to refer to the first letter of an element (if it is not preceded by any other content).

CSS Selector (A or B) and C?

is there a better syntax?

No. CSS' or operator (,) does not permit groupings. It's essentially the lowest-precedence logical operator in selectors, so you must use .a.c,.b.c.

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.

CSS and and or

&& works by stringing-together multiple selectors like-so:

<div class="class1 class2"></div>

div.class1.class2
{
  /* foo */
}

Another example:

<input type="radio" class="class1" />

input[type="radio"].class1
{
  /* foo */
}

|| works by separating multiple selectors with commas like-so:

<div class="class1"></div>
<div class="class2"></div>

div.class1,
div.class2
{
  /* foo */
}

What does the * * CSS selector do?

Just like any other time you put two selectors one after another (for example li a), you get the descendant combinator. So * * is any element that is a descendant of any other element — in other words, any element that isn't the root element of the whole document.

Is there a css selector which selects an element outside the current element?

Selectors express structural relationships between elements. When you ask for a selector for an element that is "outside" another element, you're looking for a combinator that says "this element appears outside the containing scope of this other element".

There is no such combinator.

You could conceivably select specifically the .outside sibling of .parent, but then you run into another problem that there is no parent selector for matching .parent relative to .child:hover like there is for matching .child:hover relative to .parent (that is, .parent > .child:hover).

See also: How do I select an element based on the state of another element in the page with CSS?

CSS '' selector; what is it?

> selects immediate children

For example, if you have nested divs like such:

<div class='outer'>
    <div class="middle">
        <div class="inner">...</div>
    </div>
    <div class="middle">
        <div class="inner">...</div>
    </div>
</div>

and you declare a css rule in your stylesheet like such:

.outer > div {
    ...
}

your rules will apply only to those divs that have a class of "middle" since those divs are direct descendants (immediate children) of elements with class "outer" (unless, of course, you declare other, more specific rules overriding these rules). See fiddle.

div {  border: 1px solid black;  padding: 10px;}.outer > div {  border: 1px solid orange;}

<div class='outer'>  div.outer - This is the parent.  <div class="middle">    div.middle - This is an immediate child of "outer". This will receive the orange border.    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>  </div>  <div class="middle">    div.middle - This is an immediate child of "outer". This will receive the orange border.    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>  </div></div>
<p>Without Words</p>
<div class='outer'>  <div class="middle">    <div class="inner">...</div>  </div>  <div class="middle">    <div class="inner">...</div>  </div></div>