How to Use '&' and a Tag on the Same Selector

How to use `&` and a tag on the same selector

Last I heard, this is actually an upcoming feature in SASS 3.3 or 3.4.

See this thread for a question similar to yours and this thread for the proposed solution to be included (which, at the time of writing, seems to be &__element).

The issue here isn't the use of [] and & together - it's the use of a plain element in the selector. Your example with .baz should work as expected.

How to specify a html tag on a LESS CSS nested class?

I kinda don't see much of a point in trying to nest these two rules if they won't share any common styles within the exit class.

That said, if you still want to nest them, remember that in selectors, element names always precede other simple selectors. Try placing the & after the element name and see if it works:

.exit{
    article&{
        width:260px; height:200px; top:315px; left:505px;
        figure{background-color:@exit-bg;}
        .box:hover{.perspective-box(se, 10, @exit-shadow);}
    }
    section&{
        .box:hover{.perspective-box(nw, 10, @exit-shadow);}
        .intro figcaption:hover{background:@exit-hover;}
    }
}

:after and :before pseudo-element selectors in Sass

Use ampersand to specify the parent selector.

SCSS syntax:

p {
    margin: 2em auto;

    > a {
        color: red;
    }

    &:before {
        content: "";
    }

    &:after {
        content: "* * *";
    }
}

Having a P and Select tag on the same line

Just use inline displaying.

#platformRating {  display: inline-block;}

<style type="text/css">  #platformRating select,  #platformRating p {    display: inline;    vertical-align: top;    line-height: 28px;  }</style><div style="float: left; margin-left: 10px;">  <div id="platformRating">    <p>Platform:</p>    <select id="cboPlatform" name="cboPlatform">      <option>General</option>      <option>Android</option>      <option>Windows</option>      <option>Web Service</option>    </select>  </div>  <textarea id="txtRatingDescription" name="txtRatingDescription" placeholder="Enter your comment here"></textarea></div>

Which characters are valid in CSS class names/selectors?

You can check directly at the CSS grammar.

Basically¹, a name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers. There is a catch: if the first character is a hyphen, the second character must² be a letter or underscore, and the name must be at least 2 characters long.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

In short, the previous rule translates to the following, extracted from the W3C spec.:

In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-z0-9] and ISO 10646
characters U+00A0 and higher, plus the hyphen (-) and the underscore
(_); they cannot start with a digit, or a hyphen followed by a digit.
Identifiers can also contain escaped characters and any ISO 10646
character as a numeric code (see next item). For instance, the
identifier "B&W?" may be written as "B&W?" or "B\26 W\3F".

Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions, as in -moz-opacity.

¹ It's all made a bit more complicated by the inclusion of escaped unicode characters (that no one really uses).

² Note that, according to the grammar I linked, a rule starting with TWO hyphens, e.g. --indent1, is invalid. However, I'm pretty sure I've seen this in practice.

How to make css selectors with the same specificity be applied in order of HTML tags parenthood?

It can be achieved using CSS variables:

a {
  color: var(--link-color);
}
.style1 {
  --link-color: red;
}
.style2 {
  --link-color: green;
}

<div class="style2">
  <span>
    <a href="/">Style 2</a>
  </span>
  <div class="style1">
    <div>
      <a href="/">Style 1</a>
    </div>
    <div class="style2">
      <a href="/">Style 2</a>
    </div>
  </div>
</div>

CSS - Select specific element inside other element with same tag name and attributes

Best way is just add an data-attribute to your template and select with that data-attribute in css.
working http://jsfiddle.net/Ls8EP/65/ link

---

Related Topics