KirkHings.com » CSS

How to Count CSS Specificity Scores and Leverage !Important Overrides

Kirk — Mon, 25 May 2009 00:43:09 +0000

If you are having difficulty getting a particular CSS style to “appear”, one thing to check is your specificity. CSS specificity is a four digit score for resolving cascade conflicts. You can actually add up the specificity score to determine which conflicting style should prevail. The four digit score is comprised of inline style, id, class, and element. You can express it as #, #, #, #. Examples are provided below.

For example, what gets displayed when you have two conflicting styles specified for the same element?

li { background-color: blue; }
li { background-color: yellow; }

Of course we know intuitively and through practice that the second style is displayed because it is read after the first and so it “overwrites” that first style. Less intuitively, you should know that the second wins because it has the same level of specificity as that first style. The two styles above each have the score 0, 0, 0, 1 because they are not inline styles, they have no id or class specification, and they specify only one element each.

Specificity refers to how specific you identify an element. Referring to just ‘li’ is just the single list item element, you are not referring to additional element information. This is like specifying different styles based on nesting, such as ‘div a’ vs. ‘p a’. Those could have two different styles because they have different nesting.

For another example, which style do you think will get displayed?

ul li { background-color: blue; }
li { background-color: yellow; }

The first style will win over the second because of greater element specificity, despite the potential of overwriting later in the script. The first style’s specificity score is 0, 0, 0, 2 while the second style’s score is still just 0, 0, 0, 1. That tiny extra specificity causes the first style to win out and get displayed. Now the power of specificity should be dawning on you, and why specificity can cause frustrating display problems in a large stylesheet. Let’s explore further.

Which style do you think will get displayed?

.nav li { background-color: blue; }
ul li { background-color: yellow; }

Of course the first style wins again because the class selector has greater specificity than the element selectors. The score is 0, 0, 1, 1, versus 0, 0, 0, 2.

Which style do you think will get displayed?

#nav li { background-color: blue; }
.nav ul li { background-color: yellow; }

Of course the first style wins again because the id selector has greater specificity than the class selector. The score is 0, 1, 0, 1, versus 0, 0, 1, 2.

Which style do you think will get displayed?

#nav .nav div ul li { background-color: yellow; }
...

Data

The inline style gets displayed here (though only on the elements containing the inline style) because inline styles have slightly higher specificity than id, class, or element styles specified in header styles or external stylesheets (remember ‘cascading’ is a key concept). The score is 1, 0, 0, 0 versus 0, 1, 1, 3. Although the specificity is greater here, you realize inline styles are an evil thing because you are mixing style with content. You should know the rule exists and how it works, and then pledge to never take it that far unless you are debugging code.

Speaking of debugging code, what if you specify something as much as you reasonably can, yet you cannot get it to display? Rather than dropping it into an inline style, you can use the !important keyword in your style, which functions as a kind of override function as far as specificity goes.

Which style do you think will get displayed?

#nav .nav div ul li { background-color: blue !important; }
#nav .nav div ul li { background-color: yellow; }

Of course the first style wins again because of the !important keyword (yes, it will also beat an inline style specification). This case indicates you have conflicting styles in your stylesheet and you need to check specificity to target what is conflicting. If your style does not display when you use !important, it indicates you have another problem like misspelling an element, class, or id.

After you have fixed the conflict, go back and remove the !important keyword or you will forever be chasing your tail across stylesheets with more and more !important declarations. Use !important only for debugging purposes.

Finally, remember specificity only comes into play when styles conflict. You can have dozens of separate style statements work beautifully together so long as they are specifying different style elements (such as background-color, font-style, color, padding, etc.) It is only when they specify the same style elements with conflicting values does the specificity score become important.

Space is Critical in CSS Selectors photo credit: makelessnoise If you are having difficulty getting...
Test Scores and Letter Grade photo credit: quinn.anya This programming challenge is from an...

Random BINGO Card Generator with Ajax Reset

Kirk — Fri, 17 Apr 2009 17:17:10 +0000

photo credit: Keees

This programming challenge is from a Lynda.com instructional video, featuring Dori Smith, which I studied/practiced last summer but once again spring 2009. I do not mean to just re-post the wonderful Lynda.com code, but rather add instructional value to it by way of clearer variable names and explanatory comments. The end result itself is not terribly sexy, but I liked the algorithm construction process.

I post these self-instructional challenges for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, self-instructional challenges are interesting and different than academic challenges because I sought, discovered, and performed them on my own volition without anyone else telling me to do so. I did it because I wanted to learn and practice.

Challenge: Create a BINGO card using HTML and JavaScript. Generate random integers between 1 and 75, and insert them into each of 24 squares, skipping the center FREE space. Integer ranges are as follow: B = 1-15, I = 16-30, N = 31-45, G = 46-60, O = 67-75. Ensure no two squares contain duplicate numbers. Bonus: After initial card load, enable resetting the card without a server call (quasi-Ajax-powered).

The HTML solution:

Make Your Own Bingo Card

Create A Bingo Card

B	I	N	G	O


		Free

Click here to create a new card

The CSS solution:

body {
	background-color: white;
	color: black;
	font-size: 20px;
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

h1, th {
	font-family: Georgia, "Times New Roman", Times, serif;
}

h1 {
	font-size: 28px;
}

table {
	border-collapse: collapse;
}

th, td {
	padding: 10px;
	border: 2px #666 solid;
	text-align: center;
	font-size: 24px;
}

#free {
	background-color: #ffff00;
}

The JavaScript solution:

window.onload = initializePage;

// even though arrays are 0-based, creating 76 positions generates elements 0-75, we will later ignore position 0
// note that newly created arrays have all elements set to false
var usedNumbers = new Array(76);

function initializePage() {
	// so older browsers do not get 24 error messages
	if (document.getElementById) {
		// enable creating a new card without reloading page
		document.getElementById("reload").onclick = anotherCard;
		// generate the new bingo card
		newCard();
	} else {
		alert("Sorry, but your browser is not running JavaScript, and this game requires it.");
	}
}

function newCard() {
	for (var i = 0; i < 24; i++) {
		// pass the current i as parameter to setSquare function
		setSquare(i);
	}
}

function setSquare(thisSquare) {
	// capture current corresponding html square (via id=)  to current digit that was passed over
	var currentSquare = "square" + thisSquare;

	// while bingo numbers are ranged 1-75, letter columns are restricted to specific number ranges
	// b = 1-15, i = 16-30, n = 31-45, g = 46-60, o = 67-75
	// OR mathematically we can generate a random number between 1-15 and add column-specific number
	// b = 0, i = 15, n = 30, g = 45, o = 60	

	// need 5 sets of numbers 0-4 (1 set for each letter)
	// note missing '2,' from third set, so as to skip the middle 'free' square
	var columnPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);

	// capture appropriate column mulitple by referencing current square # as array element
	var columnMultiple = (columnPlace[thisSquare] * 15);

	// initialize variable to be used in following do-while loop
	var newNumber;

	// generate newNumber and check if it has been used already, if so loop again
	do {
		// add random number to the particular column multiple
		newNumber = columnMultiple + getNewNumber()  + 1;
	} while(usedNumbers[newNumber]);

	// prevent duplicate numbers by testing if the newNumber has already been used once on this card
	if (!usedNumbers[newNumber]) {
		// if duplicate was not found, this must be an original #, so set this element to true
		usedNumbers[newNumber] = true;

		// assign randomized newNum to current square
		document.getElementById(currentSquare).innerHTML = newNumber;
	}
}

function getNewNumber() {
	// capture random number between 1 and 15 for bingo values
		// math.random() returns random number between 0 and 1
		// math.floor() returns floor of a decimal number (ex. 1.75 becomes 1)
	return Math.floor(Math.random() * 15)
}

function anotherCard() {
	// housekeeping: reset the usedNumbers flag arrays to all false
	for (var i = 1; i < usedNumbers.length; i++) {
		usedNumbers[i] = false;
	}

	// generate the new bingo card
	newCard();
	return false;
}

And finally here is a screenshot of the end result:

BINGO card screenshot

Random Image Display with JavaScript photo credit: davidChief This programming challenge is from a...
Disjointed JavaScript Rollover Causes Separate Animation photo credit: Matt McGee This programming challenge is from...
Three-State JavaScript Rollover photo credit: chimothy27 This programming challenge is from a...
Simple and Improved Image Rollovers photo credit: Etwood This programming challenge is from a...

Space is Critical in CSS Selectors

Kirk — Wed, 14 Jan 2009 05:04:58 +0000

photo credit: makelessnoise

If you are having difficulty getting a particular CSS style to “appear”, one thing to look at is your selector. A tiny space can cause two different selections if you are not careful.

For example, notice the single space difference between these two selectors:

div#navbar {
    background-color: #999;
}
div #navbar {
    background-color: #333;
}

That presence or lack of a single space between the (div) element and the class selection symbol (#) causes two different selections to occur. No space means the style will apply to (div) elements which are themselves marked with the class navbar. A single space means the style will apply to elements within the (div) element which themselves are marked with the class navbar.

For example,

div#navbar {
    background-color: blue;
}

would make this entire div’s background blue:


  item
  item

However, this:

div #navbar {
    background-color: blue;
}

would not apply the style. That critical space indicates a descendant element selector. It is expecting the inner (p) elements to have the navbar class. Since those (p) elements do not have navbar classes, you would see nothing and probably wonder why “it is not working”.

The descendant selector can be useful sometimes, but know the difference of what happens if that space appears in that critical spot so you don’t pull your hair out in frustration. If your style is not appearing, check for this easy space mistake.

Nerd Aside: The # symbol goes by many names around the world, such as pound sign, number sign, hash, hatch, tic-tac-toe, gate, crunch, or my favorite octothorpe. Mmm, octothorpe!

How to Count CSS Specificity Scores and Leverage !Important Overrides photo credit: laffy4k If you are having difficulty getting...
Average Rainfall photo credit: quapan This programming challenge is from an...

How to change alternating table row colors

Kirk — Tue, 06 Jan 2009 06:21:48 +0000

photo credit: Lee Carson

Everyone loves the alternating table row colors on web pages. The same idea is applied to alternating blog comment styles. You can do it quite easily, and here are the three simple steps to do it.

This technique involves PHP, CSS, and a touch of SQL. However, the logic and therefore the heavy lifting is found in the PHP. You can use this method with table rows (as is commonly used for WordPress comments), or for stacked div elements. I will present a table row version first, then a div version.

Step one is to style your two table rows so they appear distinct from each other. This of course goes in your stylesheet:

tr.rowA {
    background-color: #666;
    text-align: left;
}
tr.rowB {
    background-color: #333;
    text-align: right;
}

Step two is to write the function to determine if the row is an even or odd row (and therefore rowA or rowB). This is accomplished using the modulus operator (% in PHP). This operation gives you the remainder of a division. No matter what number we feed it, even numbers divided by 2 result in 0 remainder (therefore boolean ‘false’). Odd numbers divided by 2 result in .5 remainder (therefore boolean ‘true’).

function alternatingRows(&$counter) {
	if ($counter % 2) {
		$row = 'rowA';
	}
	else {
		$row = 'rowB';
	}
	$counter++; // increment counter for next iteration
	return $row; // return rowB or rowA
}

Note that this function can be placed on the page where it is used, but a better place would a globals file that you include. Code reuse is next to godliness.

Step three is to write the code to select your data, and present it in a loop. This is assuming you know how to create your connection object and have done so already.

$myQuery= "SELECT * FROM table";
$myResult = @$connectionObject->query($myQuery);

Note that if this is in a table you will need to code the table start and end tags outside the loop (or you will get multiple tables).

// echo alternating table rows
echo "";
$ndx = 0;
while ($row = $myResult->fetch_assoc()) {
    $rowClass = alternatingRows($ndx);
    echo "";
    echo "";
    echo "";
    echo "";
}
echo "$row[data1] $row[data2]";

The function logic is the simplest part. The echoing out your data is the trickiest part, but start small until it works and then you can expand the complexity. The styling is the funnest part, limited only by your imagination and CSS abilities.

Here is another similar example using div elements instead of table rows:

Stylesheet:

.divA {
    float: left;
    background-color: #666;
    text-align: left;
}
.divB {
    float: right;
    background-color: #333;
    text-align: right;
}

Function:

function alternatingRows(&$counter) {
	if ($counter % 2) {
		$div = 'divA';
	}
	else {
		$div = 'divB';
	}
	$counter++; // increment counter for next iteration
	return $div; // return divA or divB
}

Display:

// echo alternating divs
$ndx = 0;
while ($each = $myResult->fetch_assoc()) {
    $divClass = alternatingRows($ndx);
    echo "
    echo "$each[data1]";
    echo "$each[data2]";
    echo "";
}

Questions or comments?

No related posts.