Posts tagged css
CSS/jQuery Selector – ID with a dot
0I had an issue today while trying to use a jQuery selector on simple div with ID “Ribbon.Read-Title”. This specific selector (#Ribbon.Read-Title) usually means that we are matching the ID “Ribbon” have the class “Read-Title”. But trying to match the ID “Ribbon.Read-Title” will simply not work with this selector. This is also true for a CSS selector.
The workaround is to escape the dot with a backslash. So in the above example, you would use selector #Ribbon\.Read-Title to match the specific ID “Ribbon.Read-Title”.
Note: Contrary to what some people believe, using a dot in an ID or Name attribute is totally valid and accepted, as specified by the W3C. However, it’s easy to confuse the default selector behavior for dots.
CSS: How to remove the dotted outline on links
0When you click on a link element, it becomes focused and displays a dotted border around it. In some case, you might want to remove that outline for aesthetics, especially on menu links that are displayed as block elements. To remove that outline, simply place this CSS line of code:
a:focus {
outline:none;
}
In the above example, all links that become focused won’t display the outline.
Keep in mind that hiding that outline will prevent people use keyboard navigation to see which element is selected.