What is the difference between div#name and #name? Or is there a difference if you use class or id to position a certain element? Thank you
the first one is more specific if you have several rules applying
for instance, in this example the first case "wins", since it is more specific.
div#kuku {color:red}
#kuku {color:blue}
A good source for reading: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
You use IDs for elements that appear once in the document. You use classes for more than one elements in the page.
What is the difference between
div#name and #name?
div#name
refers to only that div which has id 'name'
while #name refers to any element having id 'name'
Class selectors can apply to many tags, while an id is uniquely associated with a single tag. So I'd say that a class selector will return multiple elements, while an id selector would return one.
div#name limits the selector to DIVs with the id only.
#name apples to any element with that id.
As #naivists points out, in case of a concurrency between two rules the more explicit one (div#name) wins.
IDs are unique on a page and have more specificity. In other words, if you have
<div id="foo" class="bar">
Then
#foo{
background: green;
}
div#foo{
background: red;
}
.bar{
background: purple;
}
will be red. There is a good Specificity Wars explanation of this using Darth Vader and Star Wars here
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Image here:
http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
In brief an ID # trumps any number of classes (.) which in turn trump any number of tag selectors. e.g:
# *beats* . . . . *beats* body div div ol li p
div#name will match
<div id="name">foo</div>
but not
<span id="name">foo</span>
#name will match both, but you cannot have both in the same document as IDs are unique in the document, and classes can be multiple.
As for positioning, you generally have a number of elements with a given classname but id is specific to a single element. You generally do not want to position a number of elements at the same time, unless it is for only 1 axis.
Related
What is the best way to preserve white space in HTML? We have a lot of pages that bring down data from our database, and the data may have multiple spaces in it. The rendered HTML elements that hold the data vary from anchor tags (<a>), spans (<span>), table rows (<tr>, <td>, etc.
The easiest thing to do right now would be to add a global css class like so:
body a, span, tr, td { white-space: pre; }
I'm wondering if there is a better way to implement this without assigning a class to each individual HTML element.
I would use the same technique, but inside a data class wrapper where it is needed:
.data a, .data span, .data tr, .data td { white-space: pre; }
HTML:
<div class="data">
....
</div>
<pre>no need for style</pre>
This depends on whether you wish to preserve all whitespace in certain elements and what exactly should happen there. Assuming that there are no CSS rules that might interfere, your CSS can be simplified to
a, span, tr { white-space: pre; }
because an a element is alway within body and td by default inherits the property from tr.
If you only wish to prevent multiple spaces from collapsing, instead of forcing fixed division to lines, then white-space: pre-wrap or replacing spaces by no-break spaces might be more adequate.
Finally, the need and possibilities for restricting the rule to selected elements greatly depend on how the selection should be done. Perhaps you can selectively set white-space to pre (or pre-wrap) to some elements that enclose the relevant parts, remembering that the property inherits if not set on inner elements.
You can also break the inheritance: you could set white-space: pre on a table element for example, if you wish to make the rule apply to most of the content, and set white-space: normal on those rows or cells where it is not to be applied.
What is wrong with replacing spaces by ? This should work inside any element and preserve the spaces in the rendered output.
How I can set a style of a:visited with JavaScript or jQuery. I know how to set with a regular link like
document.getElementById('a12').style.color = '#ff0000';
But I don't know how it works with a:visited?
Style properties adjust style attributes which apply to elements, they completely replace selectors
You have two choices.
Write your rule-sets in advance, and then design the element to match the selector.
e.g.
.foo:visited {
color: #f00;
}
document.getElementById('a12').className += ' foo';
Dynamically generate rule-sets with selectors that match the element.
See bobince's answer at Setting CSS pseudo-class rules from JavaScript
I am cloning an element and removing the id to avoid duplicates. Typically there will only be a class. In the event an end user chooses to use an id and style it, I want to ensure the style is preserved on the cloned element. Here is a rudimentary example.
/* css */
#unique {
background: yellow;
}
.general {
border: 1px solid blue;
}
/* html */
<div id="container">
<div id="unique" class="general">hello</div>
</div>
/* js/jquery */
$(function() {
$( ".general" ).clone().appendTo( "#container" ).removeAttr( "id" );
});
EDIT:
The linked duplicate provides a jQuery plugin solution. It uses .getComputedStyle method which works but is resource intensive since it loads all of the computed styles. I was hoping for a way to identify only the end user's couple of styles that they may have applied to an id.
id attribute needs to be unique but classes not. So bind all CSS rules to a class, so when you remove the id the styles will stay. It is a bad practice to use id selectors in CSS.
Then you can add a class only for that specific rule that you need to be unique and remove the class from cloned objects using $(...).removeClass() function.
How is it possible to add style (colors) to text in an html document in a letter by letter basis (by numbers and any symbol as well), to each letter a defined color is applied.
Think you have grapheme-color synesthesia, in this case I have, and want to make a text editor with your colors applied to glyphs. Although there are ready programs I want to enjoy doing one myself and practice my JavaScript skills. Later I am planning a reader also.
One way is to wrap every letter in an html element in another element, say a span and apply style by class name being related to the wrapped letters name. I will use same idea also in a React Native app.
Is there any other more efficient or more proper way to achieve this?
Basic regular expression with replace to add spans. You can replace the string with a function so you can do something more dynamic to determine the color.
var ps = document.querySelectorAll("p");
[].forEach.call(ps, function (elem) {
elem.innerHTML = elem.innerHTML.replace(/(\S)/g, "<span>$1</span>");
});
span {
display: inline-block;
border: 1px solid black;
width: 20px; text-align: center;
}
<p>Mary had a slice of bacon. It cost $0.75 and tasted great.</p>
<p>Bill had no bacon. He was sad!</p>
Other than doing the looping and replacing, I do not think there is another way of doing it.
Below is the reference link,
Change this span tag in the referenced example,
ie. instead background give color in style tag
<span style="color:'+bgColor+'">'+ text.charAt(i) +'</span>
and
Change the css background:white
Reference link
I'm trying to give a custom style to neighbours items with the same class, this is the example on jsfiddle
i tried this code, but this gives style to the second, not the first or middle items ..
ul li.active+li.active div {
border-radius: 0 50% 50% 0;
}
the second line describe what i want to do exactly, the same idea if there is more than 2 active items ..
how could i do that using css !
It is the nature of CSS that selectors are cascading, and that, selectors can only be used to identify elements 'beneath' or following the referenced node.
The only available sibling selectors are + (immediate following sibling) and ~ (following siblings), you cannot select a preceding or parent element.
If you wish to select both the preceding and following elements, you will need to resort to e.g. jQuery
$('.active').prev('.active') and $('.active').next('.active')