CODEWITHSUNDEEP
csscss-selectors
Andrés Orozco
Andrés Orozco

Reputation: 2661

How to select any item preceded by some word in CSS

What I need to do is really simple (Theoretically). I have a some selectors like these:

.foo-one{
    color: #fff;
    border: 1px solid red;
}

.foo-two{
    color: #fff;
    border: 1px solid blue;
}

What I need to do is to select any item that start with ".foo-" to apply a global style to all of them, because I don't want to do something like:

.foo-one{
    transition: border 1s linear;
}

.foo-two{
    transition: border 1s linear;
}

Is there a way to do this?

Upvotes: 0

Views: 95

Answers (5)

Curtis
Curtis

Reputation: 103348

If theres going to be a lot of different classes starting with foo, I would recommend creating an extra class for this called foo for example, so you can just do:

.foo{
    transition: border 1s linear;
}

However if this is not an option, rather than 2 styles, you could have 1 using 2 selectors in your rule:

.foo-one,
.foo-two{
    transition: border 1s linear;
}

I wouldn't recommend trying to create one selector to suit different class names starting with foo. It defeats the point of class names.

Upvotes: 0

Antoine
Antoine

Reputation: 331

By searching a bit, I found this, that's not exactly what you wanted, but that could do it:

.foo-one,.foo-two {
    transition: border 1s linear;
}

Source: "http://www.w3schools.com/cssref/css_selectors.asp"

Upvotes: 0

Clyde Lobo
Clyde Lobo

Reputation: 9174

try

[class|=foo]

Demo

http://jsfiddle.net/Z7X4X/

Reference : https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Upvotes: 1

Pat Dobson
Pat Dobson

Reputation: 3299

Try this:

[class*="foo-"]{ 
    .. styles for all classes starting with foo- ...
}

Upvotes: 0

krasu
krasu

Reputation: 2037

Bootstrap used selector like this [class^="foo-"]

^="string" means start with string

CSS3 Attribute Selectors

Upvotes: 2

Related Questions