-1

I know that if I have a class name (with spaces), e.g. 

my classname

I can create a class selector with:

.my.classname

However, how can I create a class selector If I have dashes between spaces like this:

My - Classname and Others

Or this:

My - Clasname

Thanks for the tips.

Emerson Maningo
  • 2,189
  • 9
  • 32
  • 47
  • But why do you create such classNames? – Ram Apr 03 '13 at 03:21
  • For a specific application, that's from a short title. Is it possible? Thanks. – Emerson Maningo Apr 03 '13 at 03:26
  • Your first selector selects the last example, you don't have to use all the class names in the selector. – Ram Apr 03 '13 at 03:27
  • Why not simply convert titles `My - Classname` to `my.classname` – Roko C. Buljan Apr 03 '13 at 03:27
  • I'm not entirely sure I understand the question. What do you mean by "how can I create a class selector"? This may help as well - http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names – Ilia Frenkel Apr 03 '13 at 03:29
  • (1:) What is `and Others` ? (2:) What is *"short titles"* ? (3:) again, why you need it? (4:) can we see some example? – Roko C. Buljan Apr 03 '13 at 03:41
  • I'm fairly sure the whole problem here stems from one misunderstanding: "I know that if I have a class name (with spaces), e.g. my classname". No, you do not have a class name of 'my classname", you have an element with two classes - 'my', and 'classname'. `.my.classname` in css selects all elements who have both the class 'my' and the class 'classname', so it would also select an element for which the class attribute is "my class is totally not classname". – Chris O'Kelly Apr 03 '13 at 03:42
  • why you need such names ? – A.T. Apr 03 '13 at 04:31

3 Answers3

0

Why not simply to convert titles My - Classname to .my.classname

LIVE DEMO

var title   = "Properties Listing - 3 Per Page";
var toClass = '.'+ title.replace(/-/g, '').replace(/\s{1,}/g, '.').toLowerCase() ;

alert(toClass); // .properties.listing.3.per.page
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
0

There's no difference from the first case except that your element will have 3 class: My , - and Classname. So you just need to do the same selector:

$(".my.-.classname")
Eli
  • 14,779
  • 5
  • 59
  • 77
  • I even have complex class names like Properties Listing - 3 Per Page so the selector would be: .Properties.Listing.-.3.Per.Page ,I tried running this and it does not work. – Emerson Maningo Apr 03 '13 at 03:38
  • @roXon I think space is only valid class when you have another class name for that element http://jsfiddle.net/TnBLf/ – Eli Apr 03 '13 at 03:39
  • @CodexMeridian well how come your class name like that? But it's still work http://jsfiddle.net/TnBLf/1/ – Eli Apr 03 '13 at 03:40
  • @user1479606 `space` is not a class name, it is considered as a separator. check the [html5](http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#classes) spec – Arun P Johny Apr 03 '13 at 03:50
  • @ArunPJohny sorry I mean dash, just a typo – Eli Apr 03 '13 at 03:51
0

You can use the attribute selector for this purpose.

$('[class="My - Clasname"]')

Note: My - Classname and Others is not a single class it is a mix of 5 classes My, -, Classname, and and Others.

Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • ...where `-` (as standalone) is not a valid className, therefore the answer is valid(?) – Roko C. Buljan Apr 03 '13 at 03:43
  • @roXon sorry missed that point, any way I think the selector will work – Arun P Johny Apr 03 '13 at 03:44
  • I think it will, but in any case... should be avoided as not semantic, errata prone and all the possible terms you can invent :) – Roko C. Buljan Apr 03 '13 at 03:45
  • @roXon yes of course, I was going through [html4](http://www.w3.org/TR/html4/struct/global.html#adef-class) and [html5](http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#classes) but no where I found `-` is a invalid class name. Can you point me to some spec doc regarding this – Arun P Johny Apr 03 '13 at 03:49
  • and also read this: [W3Standards/allowed/classnames-part2](http://jsfiddle.net/Tfe8F/1/) ;) Now read my first comment – Roko C. Buljan Apr 03 '13 at 03:56
  • @roXon it is a implementation right, or is it specified somewhere in the w3c spec doc – Arun P Johny Apr 03 '13 at 03:57
  • It was just a joke, but I'm surprised how we're searching for written proof for something that clearly does not work, in any case: http://www.w3.org/QA/Tips/goodclassnames – Roko C. Buljan Apr 03 '13 at 04:26