Is it bad thing if I add more than one class for one object. Let's say:
text
Don't ask me why, I just need it.
Thanks.
You can use multiple class names (a perfectly normal thing to do), but are only allowed one class attribute on your HTML element.
Do this instead:
text
Following on from RedFilters' answer you could of course extend your class selectors by using the angular ng-class attribute as follows:
text
The resulting html would then be:
text
Might come in useful to get around a tslint "line too long" error :-)
There's no need for two class statements, simply:
text
Now, in order to handle this in CSS you need to do this:
.paren.default{
}
...Whithout spaces between the two class selectors.
Cheers!
Related
<p class="smallText">{{vehicleItem.registration}}, {{vehicleItem.colour}} {{vehicleItem.make}} {{vehicleItem.model}}</p>
I'd like to capitalize vehicle registration and model and make should be camel case
I will suggest wrapping registration and make with a span containing different classes e.g.
<p><span class="capitalize">{{vehicleItem.registration}}, {{vehicleItem.colour}} <span class="camel-case">{{vehicleItem.make}} </span> {{vehicleItem.model}}</p>
This way you are adding "two" css rules to one element. I also recommend you achieve the camelcase style using Javascript.
You can write as many classes into an HTML tag as you want, thereby applying as many CSS rules as you want. Example:
<p class="smallText myclass_1 myclass_2">
I'm not experienced with angular but you should be able to use different functions like
capitalizeFirstLetter(vehicleItem.registration)
and
camelize(vehicleItem.model)
Converting any string into camel case
How do I make the first letter of a string uppercase in JavaScript?
Is it possible to get a class that contains some name? I have many classes with repeated part of the name, like: first_class, second_class, third_class etc.
I want to do something like:
$('selector').getChildren('.*_class')
is it possible?
MooTools uses the CSS selectors in the W3C specs. So you could use [class*="bar"] like this: $('myDiv').getElements('[class*="_class"]').
Just keep in mind if the search string is too generic you might also target other elements. Adding a common class could be a better idea, or even try to match some DOM pattern in the relations between elements.
jsFiddle: http://jsfiddle.net/h49s551s/
One solution would be to add a common class name to each item, i.e.
<div class = "first_class common_classname">foo</div>
then call your objects by using the common class name. Another solution is to call them all at once
$('selector').getChildren('first_class, second_class, thirdclass')
one quick questions, since I wasn't able to find something yet.
If I have such an HTML Code
<ul class="bla">
...
</ul>
<ul class="bla" id="blubb">
...
</ul>
and a CSS Code like
.bla {do something}
how can I change some attributes in my 2nd ? I heard the best way is to give the class an unique ID and then overwrite the CSS from the "bla" class. So first question : Is that the best way ?
Second question would be - how do I call it best in CSS ?
just like :
.bla {do something}
#blubber {do something else}
or is there also another way to be more specific (something like .bla#blubber <-- which wont work just meant - if there is a way to call BOTH elements to be "more specific).
Thanks for helping out :)
First problem:
You can do that, or even add a new class like this:
<ul class="foo bar"></ul>
And then reference in the css file as .foo.bar {...}.
Second problem:
As #cris9696 suggested, you can use the #id.class form, example: http://jsfiddle.net/gKCbc/
Maybe this for the second problem?
#id.class{
//css
}
Over writing every property my be difficult in some cases. specially when you have a number of properties specified. But what you can do is put the common one's in the more general selector, like in the class selector, and put more specific properties in Id selectors. U can also put default style in the general selector. And for the second question #idSelct.Class Works.
If for example, I have a tag: Ex1, I want to identify what that tag is doing there. Title,class & id attributes aren't options as I use class&id for CSS and title displays text when hovered. So, is there any attribute to do that? Thanks!
Not really sure what your asking, but are you trying to apply meta-data as an attribute? If so, you can add more than one class (class="one two three fourClasses"), or use the data- attribute.
You can also use "data-[yourText]" as a cross-browser-safe attribute in any elements, and this often makes it nice to describe things because you can include more information in the custom data attribute value:
Ex1
Ex2
Ex3
What's wrong with <!-- HTML comments --> for annotations?
Trying to learn html/css. I've been looking at the html & css files of a couple different websites that have something along the line of:
<span class="mytest anothertest">some text goes here</span>
I understand the "mytest" part but what does "anothertest" do? There's no reference to that anywhere in their css or html files.
anothertest is just another class like mytest. You can apply more than one to an element.
There are several possible reasons for the presence of a class name in a class attribute value. Using the class in page stylesheets is probably most widely known, but not the only one:
The class name can be used in JavaScript in order to process a set of elements conveniently. (Using document.getElementsByClass is one way to achieve this; another way is to use jQuery; and you could even hand-code it rather simply.)
Designated class names are used in some metadata systems, such as microformats. Some search engines recognize such names and use them to provide semantic searching (though this approach probably loses to microdata, which uses different attributes).
A class name can be used in a user style sheet, e.g. by a developer who wishes to do some testing. This could well be the case if the class name is literally “anothertest.”
The name might be there to allow future development, e.g. so that elements of a class will be or may be styled in some future version. The designers might have ideas on styling but they haven’t decided on it—they just want it to be easy when they are ready.
It could be just a holdover. It was a class that had some use, but things changed. There was really no particular reason to remove it.
This is a very good question. It involved the difference between id and class.
ID
An ID placed on an element, is a unique identifier for that element. An element may only have one ID, and only one of the same ID may exist on a page. So for instance, the following examples are not possible.
<a id="someid anotherid">Multiple IDs - Wrong</a>
<a id="someid"><span id="someid">Same ID twice - Wrong</span></a>
Class
A class name however, is the exact opposite. An element may have several class names, and the same class name may appear multiple times on a page. Like so:
<a class="someclass anotherclass">Multiple Classes - Correct</a>
<a class="someclass"><span class="someclass">Same Class twice - correct</span></a>
In short, the syntax displayed in the question is simply having 2 class names on one element, which is perfectly acceptable.
Class name are also used to easily select elements in the page with JavaScript. You can use the getElementsByClassName method to access them or using your favorite CSS selector library (ex.: Sizzle) if you need compatibility for older browser.