What Is CSS "[Class*=My-Class] .My-Subclass" Doing

What is css [class*=my-class] .my-subclass doing?

It selects an element with class logo that has an ancestor that has wrapper somewhere in its class attribute. For example note that the class burgerwrapper also leads to the element being selected below.

[class*=wrapper] .logo {  color: #f99;}

<div class="logo">Not selected</div>
<div class="wrapper">  <div class="logo">    Selected  </div></div>
<div class="burgerwrapper">  <div class="logo">    Selected  </div></div>

CSS Classes & SubClasses

Just need to add a space:

.area2 .item
{
    ...
}

wildcard * in CSS for classes

What you need is called attribute selector. An example, using your html structure, is the following:

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

In the place of div you can add any element or remove it altogether, and in the place of class you can add any attribute of the specified element.

[class^="tocolor-"] — starts with "tocolor-".

[class*=" tocolor-"] — contains the substring "tocolor-" occurring directly after a space character.

Demo: http://jsfiddle.net/K3693/1/

More information on CSS attribute selectors, you can find here and here.
And from MDN Docs MDN Docs

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.

CSS is there something like a class subclass?

HTML

<input type="text" class="btn red" value="Red">
<input type="text" class="btn green" value="green">
<input type="text" class="btn blue" value="blue">
<input type="text" class="btn black" value="black">
<input type="text" class="btn orange" value="orange">

CSS

.btn{
    border:1px solid grey;
    width:50px;
    height:10px;
    padding:10px;
    margin: 10px;    
}
.red{
    background-color:red;
}

.green{
    background-color:green;
}

.blue{
    background-color:blue;
}
.black{
    background-color:black;
    color:white;
}

.orange{
    background-color:orange;
}

Here is the fiddle

Sass .scss: Nesting and multiple classes?

You can use the parent selector reference &, it will be replaced by the parent selector after compilation:

For your example:

.container {
    background:red;
    &.desc{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
.container.desc {
    background: blue;
}

The & will completely resolve, so if your parent selector is nested itself, the nesting will be resolved before replacing the &.

This notation is most often used to write pseudo-elements and -classes:

.element{
    &:hover{ ... }
    &:nth-child(1){ ... }
}

However, you can place the & at virtually any position you like^*, so the following is possible too:

.container {
    background:red;
    #id &{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
#id .container {
    background: blue;
}

However be aware, that this somehow breaks your nesting structure and thus may increase the effort of finding a specific rule in your stylesheet.

*: No other characters than whitespaces are allowed in front of the &. So you cannot do a direct concatenation of selector+& - #id& would throw an error.

Jquery select this + class

Use $(this).find(), or pass this in context, using jQuery context with selector.

Using $(this).find()

$(".class").click(function(){
     $(this).find(".subclass").css("visibility","visible");
});

Using this in context, $( selector, context ), it will internally call find function, so better to use find on first place.

$(".class").click(function(){
     $(".subclass", this).css("visibility","visible");
});

What is the use of the css syntax used in below code?

That selector is looking for an element with a class that contains the word "icon". It's a attribute wildcard selector.

So for example, anything like this would be selected.

class="icon-blue"
class="roundicon"

You also have other methods to perform this kind of check by using ^, $

So the CSS with ^ would look like this:

   [class^="icon"] {
    /* THIS SELECTS ANYTHING THAT BEGINS WITH ICON */
   }

This would select this type of class:

class="icon-blue"
class="icon-green"
class="iconbluegreen"

Then the dollar sign $ in the selector would look like this:

   [class$="icon"] {
    /* THIS SELECTS ANYTHING THAT ENDS WITH ICON */
    }

And would select this type of class:

class="blue-icon"
class="green-icon"
class="bluegreenicon"

Can a CSS class inherit one or more other classes?

There are tools like LESS, which allow you to compose CSS at a higher level of abstraction similar to what you describe.

Less calls these "Mixins"

Instead of

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

You could say

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

---

Related Topics