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.
Related
I am talking about a whole new project, instead of legacy code, since I know sometime it takes so long duration and effort to refactor legacy code.
You may already know that the specificity of using ID as CSS selector is higher than using class name as CSS selector, so it is much more harder to override ID selector than class name selector.
<div class="class-a" id="id-a">Lorem Ipsum</div>
<style>
#id-a{
color: blue;
}
.class-a{
color: red;
}
</style>
E.g. For the code above, the text Lorem Ipsum will always in color blue instead of red even though the class name selector is being written after the id selector.
So why should someone use id as selector instead of using class name? Shouldn't we just use class name and maybe some time with tag name and totally avoid using id as CSS selector and leave id for javascript selector(Since it is much more efficient than using class name and tag name)?
If you would like to have a selector which is kind of unique to yourself and someone who are going to take up your code, you could actually do something like below.
<nav class="navigation-bar" id="navigation-bar">...</nav>
Use a same class name as the id of the element!
This is what I think, but I often see other developer using ID as CSS selector, why do so many people do that? Did I actually missed something? If yes, please let me know.
Thanks in advance.
ID is supposed to be unique but CLASS can be reused many times. Its better to use CLASS if you use frequently.
I'm working on a blogger theme and I'm trying to add a class to a div in case the blog is seen via mobile. To be specific: my two classes are: presentation and presentation-mobile.Since blogger doesn't allow to use a structure like:
if()
<div class="a">
else
<div class="b">
Because it requests to close the div element inside the if (... for real?)
I was forced to use this string of code which seems not to work... can somebody point out where I'm wrong or suggest the right way?
expr:class='"container-fluid presentation" + (data:blog.isMobile? "-mobile":"")'
the error output is:
The expression '"container-fluid presentation" + (data:blog.isMobile? "-mobile":"")' is not valid.
Try using the newly introduced b:class operator. It is used for adding class to the parent element (including appending class names if class already exists). The code will look like -
<div>
<b:class name='presentation' cond='!data:blog.isMobileRequest'/>
<b:class name='presentation-mobile' cond='data:blog.isMobileRequest'/>
</div>
Also, the reason why data:blog.isMobileRequest is preferred over data:blog.isMobile is because it will function even if the mobile version of the blog is disabled via Settings
Leave a space around ternary operator ? : and use data:blog.isMobileRequest instead of data:blog.isMobile
expr:class='"container-fluid presentation" + data:blog.isMobileRequest ? "-mobile" : ""'
Say I have this HTML:
<body>
<div>
</div class="Something-generated-is7293n">Hello</div>
</div>
</body>
How would I go about finding this considering the following constrains:
This is for testing purposes so I don't want to assume a certain structure. This way if a <div> suddenly is added to the HTML, my xPath won't break my test.
I cannot even try to guess what the class will be. I can only know it will contain, say, Something and generated.
I tried //div[contains(#class, 'Something') and contains(#class, 'generated')] with no success at all, which makes me think I'm missing something to have xPath evaluate only part of a class.
Of note, my tests use ChimpJS with uses WebdriverIO.
This xpath-fiddle might do the trick for you: http://xpathfiddle.net/UN71EW
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')
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!