What is the difference between :before and ::before?
This distinguishes pseudo elements from pseudo classes.
The difference between pseudo classes and pseudo elements is described at http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html
What is the difference between : and :: when using before and after?
The ::before notation (with two colons) was introduced in CSS3 in
order to establish a discrimination between pseudo-classes and
pseudo-elements. Browsers also accept the notation :before introduced
in CSS 2.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/::before
As before is a pseudo ELEMENT and not a pseudo CLASS (like :hover) two colons is better (thus following the CSS3 standard).
Difference between ::after and ::before in CSS
The answer is simple. Having :active::after
and .is-depressed::before
means that when your element is pressed you will change the before
element AND when you click again you will change the after
element so two different elements.
When having both of them as before
then it's one element and it is already updated via .is-depressed
so the active state will do nothing.
To illustrate this with a more simple example:
.box { border:1px solid; width:150px; height:150px; display:inline-block; position:relative;}
.box:hover::before,.box.active::before{ content:""; display:block; height:50%; background:red;}
<div class="box"></div>
<div class="box active"></div>
What is the difference between `before()` and `beforeEach()`?
before()
is run once before all the tests in a describe
after()
is run once after all the tests in a describe
beforeEach()
is run before each test in a describe
afterEach()
is run after each test in a describe
Which one you want to use depends on your actual test.
Now, for the long explanation. If you run mocha -R min
on this:
describe("top", function () {
before(function () {
console.log("top before");
});
after(function () {
console.log("top after");
});
beforeEach(function () {
console.log("top beforeEach");
});
afterEach(function () {
console.log("top afterEach");
});
it("test1", function () {
console.log("top test1");
});
describe("sublevel", function() {
before(function () {
console.log("sublevel before");
});
after(function () {
console.log("sublevel after");
});
beforeEach(function () {
console.log("sublevel beforeEach");
});
afterEach(function () {
console.log("sublevel afterEach");
});
it("test1", function () {
console.log("sublevel test1");
});
it("test2", function () {
console.log("sublevel test2");
});
});
it("test2", function () {
console.log("top test2");
});
});
You'll see something like (I've omitted the output that is not relevant):
top before
top beforeEach
top test1
top afterEach
top beforeEach
top test2
top afterEach
sublevel before
top beforeEach
sublevel beforeEach
sublevel test1
sublevel afterEach
top afterEach
top beforeEach
sublevel beforeEach
sublevel test2
sublevel afterEach
top afterEach
sublevel after
top after
The thing that may be surprising if you look at what executes before and after each of the tests at the sublevel is that both the beforeEach
callbacks at the top level and at the sublevel are called. Same thing for the afterEach
.
Some are also surprised by the sequence sublevel before
, top beforeEach
, sublevel beforeEach
. They think that all the hooks in an outer scope should execute before all the hooks in an inner scope, so they expect the sequence: top beforeEach
, sublevel before
, sublevel beforeEach
. However, the order in which Mocha executes the hooks makes complete sense: a before
hook is meant to set the stage for a group of tests, whereas a beforeEach
test is for each individual tests. When Mocha executes a test, all the before
and the beforeEach
hooks that were set in the describe
that contains it, and all the ancestors of that describe
apply to the test. Mocha will execute each before
hook from the outermost scope to the innermost, and all beforeEach
hook from the outermost scope to the innermost. However, all before
hooks that apply are executed before any beforeEach
hook. This explains the order above: sublevel before
executes before top beforeEach
because it is a before
hook. And with after
and afterEach
, the same logic applies but the the order is reversed: all afterEach
hooks that apply are executed before any after
hook.
Also notice that Mocha does not care about how I ordered my it
calls relative to the describe
call in the top level describe
. It executes top test1
, top test2
and then the sublevel tests, even though the order I gave was top test1
, then the sublevel tests and then top test2
.
What you want to use among before
, beforeEach
, etc. really depends on the specifics of your tests. If you need to setup a mock object or data structure and this object or structure can be reused by all the tests in a single describe
, you can use before
to set it up, and after
to tear it down. This could be the case if you are doing read-only tests on the structure. If all your tests only read it, then there is no need to create it over and over. If each test in your describe
needs a new copy of the structure because each test is modifying the structure then you should use beforeEach
to create the structure anew for each test and then afterEach
if you need to tear it down cleanly. Doing this ensures test isolation: each test starts from a known state and does not depend on the presence or absence of a previous test to succeed.
What is the difference between happens before and precedes in a single total order relations for memory_order_seq_cst operations?
It seems like there are no cases...
Oh, well, there it is.
#include <iostream>
#include <thread>
#include <atomic>
#include <cassert>
std::atomic<bool> x = {false};
std::atomic<bool> y = {false};
std::atomic<int> z = {0};
void write_x()
{
x.store(true, std::memory_order_seq_cst);
}
void write_y()
{
y.store(true, std::memory_order_seq_cst);
}
void read_x_then_y()
{
while (!x.load(std::memory_order_seq_cst))
;
if (y.load(std::memory_order_seq_cst)) {
++z;
}
}
void read_y_then_x()
{
while (!y.load(std::memory_order_seq_cst))
;
if (x.load(std::memory_order_seq_cst)) {
++z;
}
}
int main()
{
std::thread a(write_x);
std::thread b(write_y);
std::thread c(read_x_then_y);
std::thread d(read_y_then_x);
a.join(); b.join(); c.join(); d.join();
assert(z.load() != 0); // will never happen
}
This example demonstrates a situation where sequential ordering is necessary. Any other ordering may trigger the assert because it would be possible for the threads c and d to observe changes to the atomics x and y in opposite order.
What is the difference between pseudo-classes and pseudo-elements?
From https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements
Pseudo-class :
A CSS pseudo-class is a keyword, preceded by a colon (:), added to the end of selectors to specify you want to style the selected elements, and only when they are in certain state. For example, you might want to style an element only when it is being hovered over by the mouse pointer, or a checkbox when it is disabled or checked, or an element that is the first child of its parent in the DOM tree.
Examples:
- :active
- :checked
- :nth-child()
- :first
- :hover
Pseudo-elements ::
Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons (::), that can be added to the end of selectors to select a certain part of an element.
Examples:
- ::after
- ::before
- ::first-letter
- ::first-line
- ::selection
- ::backdrop
As stated by @stephanmg:
In practice ::before is used as :before and ::after is used as :after
because of browser compatibility. Both are pseudo-elements, but may
look like pseudo classes. This might be confusing if you read CSS
code.
Related Topics
Bootstrap 3: Pull-Right for Col-Lg Only
IE7 and the CSS Table-Cell Property
Bootstrap: Position of Dropdown Menu Relative to Navbar Item
CSS Content, Attr and Url in the Same Sentence
Can You Apply a Width to a :Before/:After Pseudo-Element (Content:Url(Image))
Using Primefaces with Bootstrap Causes Changes in Padding/Sizing/Borders
CSS @Font-Face Not Working in IE8
How to Reverse the Order of Columns in Bootstrap 4
iPhone Web App - Stop Body Scrolling
Less Lists as a Mixin Argument(S)
Combining :Not() Selectors in CSS
Select an Element with Empty Class Attribute (Class="") Using CSS
Changing an Input's HTML5 Placeholder Color with CSS Does Not Work on Chrome
How to Preserve Line Breaks in <Code> Block
How to Do Knock-Out/Punch-Through Transparency with CSS Fonts