on http://www.w3.org/TR/css3-selectors/#negation
I found interesting selectors
html|*:not(:link):not(:visited)
does anybody knows what "|" means.
In that same page at 6.2.1, it states that the Vertical bar is for selecting elements in a namespace, (in the above example, the html namespace).
See here:
http://www.w3.org/TR/css3-selectors/#univnmsp
You can find more information about it here :
What | means in CSS
It is used to separate namespace and element name in CSS.
Hope it will help you.
These questions seems similar to yours : Using the pipe in css or What does a pipe (|) do in a CSS selector?
It separates namespace and element name.
Unless a default namespace has been defined, |:link is a complicated
way of writing *:link or just :link.
Related
I am taking practice test for Microsoft 70-480. I came across the question in the image. To select attributes that end in specific given value should be a css attribute selector such as [attribute$='value']. I don't understand how we make that selection with a css pseudo-element. Can some one explain to me why
As you've correctly stated, you need an attribute selector for this (although you would need to use [attribute*=value] instead), and you can't match elements using pseudo-element selectors (that's why they're called pseudo-elements!).
The only explanation for the "correct answer" here being option C is that whoever wrote that test either made a mistake with the options, or doesn't understand CSS selectors. Hopefully the former.
I had initially noticed both of these work when using the jQuery css method and thought it had something to do with jQuery, but then I realized both of them were (apparently) valid aliases for the same CSS property anyway.
What's with that? I can't find it documented ANYWHERE. Every site just mentions one or the other and nobody discusses that it has two names.
I haven't tested it, but I would assume it works the same way for the other three margins. And this opens up the possibility that many different CSS properties have aliases. Is this true, and if so, is there any sort of reference for what the various aliases might be?
Note: when using 'margin-top' with jQuery, it has to be formatted as a string and not as a symbol because of the hyphen, a.k.a. just use quotes around it.
From the jQUery documentation
Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css( "background-color" ) and .css( "backgroundColor" ).
margin-top is the CSS syntax, marginTop is the DOM syntax.
I've searched a lot, but still cant find a way to use CSS3 Selectors to style all words starting with a #... Like #diy. Shouldnt that be possible using css-only?
Selectors aren't designed for selecting text content directly in part or in full, so no, it shouldn't.
Selectors are designed for matching elements. If you want to style hashtags differently, you should be wrapping them in their own elements and then styling those elements.
No, but it can quite easily be done with JavaScript.
Using Extend jQuery.highlight to highlight regular expressions:
$('body').highlight(/\B#\w+/)
Working example: http://jsfiddle.net/kobi/ttd9r/
I'm using a combination of two classes on a span element.
Both look like they're working by themselves... Together they're not.
.black {color:black;}
.size_14 {font-size:14px;}
<span class="black size_14">my text is not black..neither large</span>
I tried changing the size_14 class name for another one (large) and in this case it is working.
Is size_14 an invalid class name?
SOLVED
I was overriding the behaviour with
.article_text_div .size_14 {color:#6D6E71;}
But thanks to this mistake I discovered It's better(?) not to use underscores inside class names
Double thanks
Luca
That example seems to work fine. There must be another rule that is overriding your change. Check the CSS with Firebug or a similar inspector, it will tell you exactly which classes are being used and overridden.
Underscores are not recommended in class names and ID's. Support is mixed across the board. I would remove it or replace it with a dash.
If I were you I'd be inclined to try the following, but without seeing the rest of the code it's difficult to tell if it'll make a difference..
.black{color:black;}
.size-14, span.size-14{font-size:14px;}
You can use underscore, article in above comment was written in 2001. All latest browser supports use of _. But most developer prefer to use "-" for class names.
http://jsfiddle.net/ZsR4A/embedded/result/
Works as expected in IE, FF, Chrome. Make sure your size_14 has higher specificity.
<div id="SideBar" class="sidebar mainbar">
I've just seen this in a .aspx file. Is this valid? Can someone point me in the right direction to learn what this does. I'm assuming its valid, but I'm not finding it in the css file. I am finding sidebar defined as a class, but not mainbar.
Thanks in advance,
Randy
This div just has two classes, which means it will get the properties defined under .sidebar as well as those under .mainbar
Sure, you can have an element implement as many css classes as you like. If there is no class defined in the CSS files it is possible that either:
The additional css classes have been removed from the styles sheets and the .aspx pages have not been refactored to match.
The css class is been used to identify the element(s) via javascript or some other scripting language.
As for mainbar not showing up in your CSS file, sometimes developers assign classes to elements and then reference those classes in javascript.
Yes this is perfectly valid. An element can be styled by multiple classes.
See this reference and this one which touches on which one takes precedence for duplicate style attributes.
CSS Tricks has a few other CSS tricks including having two classes.
Copy/Pasting the trick from the above site:
Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. In reality, you can assign as many classes as you like!
Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.
Beware of IE6 if someday you try to style an element using more than one class, it doesn't work like intended.
Googling "multiple classes ie6"
test case
No problem with id+class (like #anid.class ) or two selectors like .classA and then .classB but no .classA.classB