Boolean Algebra
In mathematics and mathematical logic, Boolean algebra is the branch of algebra in which the values of the variables are the truth values true and false, usually denoted 1 and 0, respectively.
Instead of elementary algebra, where the values of the variables are numbers and the prime operations are addition
and multiplication, the main operations of Boolean algebra are the conjunction (and) denoted as A • B,
the disjunction (or) denoted as A + B, and the negation (not) denoted as
A. It is thus a formalism for describing logical operations, in the same way that
elementary algebra describes numerical operations.
Boolean algebra was introduced by George Boole in his first book The Mathematical Analysis of Logic (1847), and set forth more fully in his An Investigation of the Laws of Thought (1854). According to Huntington, the term "Boolean algebra" was first suggested by Sheffer in 1913, although Charles Sanders Peirce gave the title "A Boolean Algebra with One Constant" to the first chapter of his "The Simplest Mathematics" in 1880. Boolean algebra has been fundamental in the development of digital electronics, and is provided for in all modern programming languages. It is also used in set theory and statistics.
Wikipedia Boolean AlgebraImplementation
Each logical operation is constructed using the same underlying principle.
The left-most cells consist of a hidden <input type="checkbox"> and accompanying
<label> which maintains a Boolean input state. Given an
input and label pair, the label can be clicked to receive a signal, either checking or unchecking the
associated checkbox. The right-most cell consists of a <span> representing the output of the
logical operation.
Combinations of the :checked and :not(:checked) pseudo-classes can be applied to set
the background-color and content of the label, applied via its :after
pseudo-class.
The AND logical expression is implemented via a single CSS rule, such that when
input A and input B are :checked,
their associated <span> is updated to display the value 1.
| A | B | Output |
|---|---|---|
| 0 | 0 | 0 |
| 0 | 1 | 0 |
| 1 | 0 | 0 |
| 1 | 1 | 1 |
The OR logical expression is implemented via a pair of CSS rules, such that
when input A or input B are
:checked, their associated <span> is updated to display the value
1.
| A | B | Output |
|---|---|---|
| 0 | 0 | 0 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 1 | 1 | 1 |
The XOR logical expression is implemented via three CSS rules, such that
when input A or input B are
:checked, their associated <span> is updated to display the value
1, however the third rule states that when input
A and input B are :checked, their
associated <span> is updated to display the value 0.
| A | B | Output |
|---|---|---|
| 0 | 0 | 0 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 1 | 1 | 0 |
The NAND logical expression is implemented via a pair of CSS rules, such that
when input A or input B are
:not(:checked), their associated <span> is updated to display the value
1.
| A | B | Output |
|---|---|---|
| 0 | 0 | 1 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 1 | 1 | 0 |
The NOR logical expression is implemented via a single CSS rule, such that
when input A or input B are
:not(:checked), their associated <span> is updated to display the value
1.
| A | B | Output |
|---|---|---|
| 0 | 0 | 1 |
| 0 | 1 | 0 |
| 1 | 0 | 0 |
| 1 | 1 | 0 |
The XNOR logical expression is implemented via a pair of CSS rules, such that
when input A and input B are
:not(:checked), their associated <span> is updated to display the value
1, or when input A and input
B are :checked, their associated <span> is
updated to display the value 1.
| A | B | Output |
|---|---|---|
| 0 | 0 | 1 |
| 0 | 1 | 0 |
| 1 | 0 | 0 |
| 1 | 1 | 1 |
The NOT logical expression is implemented via a single CSS rule, such that
when input A is :not(:checked), its associated
<span> is updated to display the value 1.
| A | Output |
|---|---|
| 0 | 1 |
| 1 | 0 |
Logical AND
A • B
Logical OR
A + B
Logical XOR
A ⊕ B
Logical NAND
A • B
Logical NOR
A + B
Logical XNOR
A ⊕ B
Logical NOT
A