I want to disable text selection for specific elements. For example:
p {
-moz-user-select: none
}
span {
-moz-user-select: text
}
<div>
<p>first paragraph</p>
<span>first span</span>
<p>second paragraph</p>
<span>second span</span>
</div>
The first and second paragraph cannot be selected individually. However, if I select the first span and drag down to select the second span, the second paragraph will become selected in the process. I'd like to prevent this (it functions as expected in WebKit).
I'm using Firefox 14.0.1. JSFiddle for reference: http://jsfiddle.net/GFNDY/
Since the selection only "apparently" includes the <p>s (for instance if you copy, only the non-<p> tags are saved in the clipboard), then all you need to do is make sure the browser doesn't color it; that can be done by overriding the default selection-style using the CSS ::selection specifier (::-moz-selection for Mozilla).
So the CSS will have something like:
p::-moz-selection {
background: transparent;
color: #000000;
}
Here's a modified version of your demo that behaves as expected: Link.Hope that helped you in any manner!
Related
I need change a color for this element
<div class="box download">
<div class="box-inner-block">
Plugin Windows
</div>
</div>
I call a from CSS with:
.download.box-inner-block a {
color: white!important;
}
But it does not work, why? I need this color only for the element in .box-inner-block inside .download.
Is this what you are looking for as understood in your question ?
If so you need to carefully watch how you indent and construct your css.
As you can see in my snippet I added a space between:
.download .box-inner-block a
in order to make that work.
You can also remove !important from you css as it will not be useful in that case. If you need it, don't forget to add a space bewtween white and !important
.download {
background-color: black;
}
.download .box-inner-block a {
color: white;
}
<div class="box download">
<div class="box-inner-block">
Plugin Windows
</div>
</div>
You are using the wrong selector, as .download.box-inner-block selects elements which has both download AND box-inner-block classes.
<div class="download box-inner-block"/>
To target nested elements, leave a space between the two class selectors. So the correct selector in your case is:
.download .box-inner-block a {
color: white;
}
In this case you can drop !important too.
As far as I can tell, this simple example below should be working but it doesn't. I'm obviously missing something, but I can't for the life of me figure it out.
The first .field div should have red text, but it simply does not...
Running Chrome browser on Mac.
http://codepen.io/anon/pen/obbmjd
p .field:first-child {
color: red;
}
<p>
<div class="field">first - should be red</div>
<div class="field">second</div>
</p>
The HTML is invalid.
A p element can't contain a div element. This results in the following:
<p></p>
<div class="field">first - should be red</div>
<div class="field">second</div>
<p></p>
As you can see, the browser is automatically closing the p tags, which explains why your selector isn't matching anything.
If the HTML was actually valid, then your selector would work. For instance, if you replace the div elements with span elements, the following would work:
Updated Example
p .field:first-child {
color: #f00;
}
try
.field:first-child {
color: red;
}
I am trying to figure out how :not selector works. First of all I try this code
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #000000;
}
:not(p) {
color: #ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p class="example">This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some text in a div element.</div>
</body>
</html>
It works as ı expect the paragraphs aren't styled and the text in the div and the heading are red. After that I am changing the part in the style tags to this:
<style>
:not(p) {
color: #ff0000;
}
</style>
This time it doesn't work as I expected. Although I want all the elements that are not paragraphs to be red all of them are displayed as red.
Furthermore I am changing the code between the style tags to this:
<style>
:not(p.example) {
color: #ff0000;
}
</style>
This time I am expecting the elements doesn't fit to "p.example" (h1, div and the second paragraph) to be red but none of the elements are affected.
What do I miss? Shouldn't the examples shown above select all the elements those don't fit to the argument selector? Is there a rule about not using the :not selector alone (e.g not as p:not or h1:not)?
Neither of the previous answers is entirely correct.
In your second case, merely specifying
:not(p)
colors everything red because it colors the body, and color is inherited.
You to NOT have to specify, as one answer claims,
body :not(p) {
color: #ff0000;
}
That is almost exactly equivalent to :not(p) (which means *:not(p)). Nor do you have to specify any other parent such as .main as another answer claims.
The third example fails because the argument to :not is not a simple selector. The syntax you gave seems to be trying to do is to select everything that is not a p with the example class. As another respondent pointed out, what you probably meant was everything that is a p but without the example class, for which p:not(.example) is correct.
To select elements which are not A and not B (in other words not (A or B), just do
:not(A):not(B)
For example,
:not(h1):not(p)
which in this example will apply to the body and the div. A more realistic example would be to select p's other than those with either of two classes:
p:not(.class1):not(.class2)
The selector :not(p) matches all elements except p elements. This includes the body element. When your only style sheet is :not(p) { color: #ff0000; }, you thus set all content color red, since the p elements inherit color from their parents (here p) when no color is set on them directly.
If you want to set the color of content to red except for p elements and their descendants, you thus need to be more explicit. A simple way, assuming that this all you want to color, is to set the overall color to red and then override it for p elements, letting inner elements inherit color:
body { color: red }
p { color: black }
The reason why :not(p.example) does not work at all is that the operand of :not must be a simple selector, namely a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class, but not any combination of these; and p.example isn’t simple.
You could use the combined selector :not(p):not(.example), which matches any element except p elements in class example. And this is probably what you want. But the rule won’t work the way want, since here, too, the selector matches the body element, among other things, and its color gets inherited by the only element that has not got color specified for it directly. So even in this case, you would need to think otherwise, setting e.g.
body { color: red }
p.example { color: black }
After #abhitalks comments/feedback. In your first example is nothing wrong, just is related to only inherited properties which will not work. color is inherited, but border is not:
Take a look here Full property table
:not(p) {
color: #f00;
border: 1px solid gray;
}
<h1>This is a heading</h1>
<p class="example">This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some text in a div element.</div>
In you second example:
Selectors level 3 does not allow anything more than a single simple
selector within a :not() pseudo-class.
You can change it to:
body :not(.example) {
color: #ff0000;
}
<h1>This is a heading</h1>
<p class="example">This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some text in a div element.</div>
When you use :not selector, you should mentioned some parent. Based on that parent only it will work. Otherwise it will select all the elements only.
<div class="main">
<h1>This is a heading</h1>
<p class="example">This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some text in a div element.</div>
</div>
CSS:
.main :not(p) {
color: #ff0000;
}
Also if you don't want to select particular element using :not selector you need to use like below.
p:not(.example)
{
color:green;
}
FIDDLE DEMO
I know that a * prefix before a style name like *border-top-width:0; is a hack for IE browsers. However, I am unable to understand this. When * is used as suffix as shown below what does it mean ??
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
I observed that when star mark is present, the style is getting applied in chrome browser and when star mark is removed , the styles are not getting applied in chrome browser.
The * (Asterisk) symbol in a CSS file, when used after a class name, or any other identifier, will select all descendants/children inside that element.
For example, if we have this HTML document:
<div class="container">
<div class="square">
<div class="square">
</div>
<div class="container">
<div class="circle">
<div class="circle">
</div>
To select just the .container divs, the following CSS can be used:
.container
{
/*Styling*/
}
To select just the .square inside the .containers then use:
.container .square
{
/*Styling for squares*/
}
To select all the elements that are inside the .containers then use:
.container *
{
/*Styling for squares, circles, rectangles and everything else you can think off*/
}
For further information, see the W3C reference on the Universal Selector:
http://www.w3.org/TR/selectors/#universal-selector
And also the Mozilla Dev Network:
https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
When star(*) is placed after the a class name it will select all its children.
From MDN:
An Asterisk (*) is the universal selector for CSS. It matches a single
element of any type. Omitting the asterisk with simple selectors has
the same effect. For instance, *.warning and .warning are considered
equal.
Like in many other places, the asterisk is a wildcard that selects every element. When used after a class name (like in your example), every element that is a descendent of the ancestor class will have the styles applied.
I'm using the following code to add separators between my menu items:
#navigation_center li:before {
content: "| ";
color: #fff;
}
Now I want the first item not to have a separator in front of it, so I figured out the following code:
#navigation_center li:before:first-child {
content: none;
}
but that's not doing anything. Is it possible to combine :before and :first-child?
Try
#navigation_center li:first-child:before {
content: '';
}
Edit: I wanted to expand on this answer with comments made by FelipeAls. The original question used :first which is not a valid CSS selector. Instead, use :first-child. Also the order of the pseudo-selectors is important. The first child selector must come first.
I tend to think of :before as a kind of modifier to a selector. It does not actually select an element only the space just before the selected element.
Although hradac's answer should do the trick i thought it would be best to run through some possible permutations to help newcommers.
.works:first-child:before
{
color: green;
content: 'working ';
}
.works:not(:first-child):after
{
color: green;
content: ' is working';
}
.broken:before:first-child
{
color: red;
content: 'this will never show up';
}
.broken:after:not(:first-child)
{
color: red;
content: 'and this will not show up either';
}
works:
<div>
<div class='works'>
something
</div>
<div class='works'>
something
</div>
<div class='works'>
something
</div>
</div>
<hr/>
broken:
<div>
<div class='broken'>
something
</div>
<div class='broken'>
something
</div>
<div class='broken'>
something
</div>
</div>
Let's take this apart:
Three div.works are inside a div
Three div.broken are also inside a div
The first rule of CSS adds a green text "working " before. It does so by selecting the first-child and then selecting the empty space right before it.
The second rule adds " is working" after each block that comes after first, by analogy it first selects each block that doesn't fall under the first-child definition, and then selects the empty space before them.
The following two rules, will not find a block to attach themselves to. The :before:first-child attempts to select an empty space, but then tests if it is a first-child and it is not (since technically it's not yet in the DOM tree), the similar problem is with :not(:first-child).