Attribute selectors offer more options than selectors for HTML tags, IDs, and classes.

As with all selectors, you can combine them to create powerful and specific selectors.

Contents

1. Review of Attributes Seen So Far
2. Attribute
3. Exact Value
4. Exact Match a Single Value
5. Partial Match at Start of Value #1
6. Partial Match at Start of Value #2
7. Partial Match at End of Value
8. Partial Match Anywhere in Value
9. Case Sensitivity
10. Closing Thoughts
11. References

Review of Attributes Seen So Far

Attributes are additional information included inside HTML tags. So far, we have seen 9 of them (each item links to their first use in this tutorial series):

1. id
2. class
3. href
4. target
5. download
6. src
7. alt
8. reversed
9. start

Example use is shown below:

<div id="main">
  <p class="important todo scale">
    Some paragraph text.
  </p>
</div>  

<a href="http://example.com"
   target="_blank"
   download="file.txt">
   This is a link.
</a>

<img src="/img/picture.jpg"
     alt="Description of the image">

<ol reversed
    start="101">
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

Attribute

You can select elements by the attributes they contain by writing the attribute between square braces:

/*
  select all HTML elements containing the
  'reversed' attribute
*/
[reversed] {
  /* specificity = 0:1:0 */
}

/*
  select all HTML elements containing the
  'id' attribute
*/
[id] {
  /* specificity = 0:1:0 */
}

Exact Value

You can select by specifying the exact attribute and its value. The value must be in quotes:

[id="footer"] {
  /* specificity = 0:1:0 */
}

[class="red box"]{
  /* specificity = 0:1:0 */
}

[start="101"] {
  /* specificity = 0:1:0 */
}

Exact Match a Single Value

If you have attributes with multiple values (classes are a good example), you can select based on one of the values by placing a tilde (~) before the equals sign:

[class~="box"] {
  /* specificity = 0:1:0 */
}

The selector above will select the following HTML elements because they all contain box:

<p class="red box">This is a selected paragraph.</p>
<p class="box blue">This one too.</p>
<p class="red green box blue">This too!</p>

The attribute values must be separated by spaces:

<!--
  Validly separated attribute values
-->
<p class="red box a b c"></p>

<!--
  incorrectly separated attribute values
-->
<p class="red,box,a,b,c"></p>
<p class="a, b, c"></p>

You can only match one attribute value:

/*
  THIS NEVER MATCHES ANYTHING

  Even if you have an element like this:

  <p class="a red box blue">

*/
[class~="red box"] {

}

Partial Match at Start of Value #1

You can match the beginning of a value string by using the vertical-bar before the equals sign (|=). The match must be followed by a hyphen:

[class|="cf"] {
  /* specificity = 0:1:0 */
}

The selector above will match the following:

<div class="cf-abc"></div>

<div class="cf-"></div>

<div class="cf-d blue box"></div>

The selector above will not match any of the following:

<!--
  cf is not followed by a hyphen
-->
<div class="cf"></div>

<!--
  cf is not at the start of the value string
-->
<div class="red cf- box"></div>

This is an extremely specific behaviour that was originally introduced for dealing with language codes.¹

Partial Match at Start of Value #2

This is the more common way to match the start of an attribute value string.

You can match the beginning of a value string by using the caret before the equals sign (^=):

[class^="cf"] {
  /* specificity = 0:1:0 */
}

The selector above will match the following:

<div class="cfabc"></div>

<div class="cf"></div>

<div class="cf-"></div>

<div class="cf-d blue box"></div>

The selector above will not match any of the following:

<!--
  cf is not at the start of the value string
-->
<div class="red cf box"></div>

It should be obvious that you can make the ^= equivalent to the |= by simply appending a hyphen to your string:

/*
  These two selectors are identical.
*/
[class^="cf-"] {

}

[class|="cf"] {

}

Partial Match at End of Value

You can match the end of a value string by using the dollar symbol before the equals sign ($=):

[class$="nt"] {
  /* specificity = 0:1:0 */
}

The selector above will match the following:

<div class="nt"></div>

<div class="plant"></div>

<div class="cf-d blue box plant"></div>

The selector above will not match any of the following:

<!--
  nt is not at the end of the value string
-->
<div class="red nt box"></div>

<div class="plants"</div>

Partial Match Anywhere in Value

You can match the value anywhere in a string by using the asterisk symbol before the equals sign (*=):

[class*="nt"] {
  /* specificity = 0:1:0 */
}

The selector above will match the following:

<div class="nt"></div>

<div class="planter"></div>

<div class="cf-d blue plant box"></div>

The selector above will not match any of the following:

<!--
  nt is not is not found in any value string
-->
<div class="red flat box"></div>

<div class="explains"</div>

Case Sensitivity

If you want to match values without regard to upper and lower case, you append i to the end of the attribute selector:

[class="red" i] {
  /* specificity = 0:1:0 */
}

The selector above will match any of the following:²

<div class="red"></div>

<div class="RED"></div>

<div class="Red"></div>

<div class="rED"></div>

<div class="rEd"></div>

<div class="ReD"></div>

<div class="REd"></div>

<div class="reD"></div>

It is a good idea to be consistent in your use of case to avoid situations where you might need to use case insensitive matching.

Closing Thoughts

1. Attribute selectors provide 7 different ways to match attributes and their values.
   1. [attribute] – select only by attribute name
   2. [attribute=“value”] – select by attribute name and exact value
   3. [attribute~=“value”] – select by attribute name and exact match one value in the value string
   4. [attribute|=“val”] – select by attribute name and exact match at the beginning of the value string which must then be followed by a hyphen
   5. [attribute^=“val”] – select by attribute name and exact match match at the beginning of the value string
   6. [attribute$=“lue”] – select by attribute name and exact match at the end of the value string
   7. [attribute*=“value”] – select by attribute name and exact match anywhere in the value string
2. You can combine attribute selectors with other selectors and combinators:

   /*
     only selects ordered lists that contain the
     attribute reversed and the attribute list
   */
   ol[reversed][start] {
     /* specificity 0:2:1 */
   
   }
   
   /*
     selects elements contained within objects
     having an ID of #main if those elements
     contain an attribute of target
   */
   #main [target="_blank"] {
     /* specificity = 1:1:0 */
   }

3. You could colour code links to visually show if they refer this site or an external site:

     /*
       as long as the link contains
       complet-concrete-concise.com
       we assume is points to this website
     */
     a[href*="complete-concrete-concise.com"] {
       color: green;
     }

4. You could colour code links to visually show if a link uses a secure or unsecured connection:

     /*
       secure links begin with https
     */
     a[href^="https:"] {
       color: green;
     }
   
     /*
       unsecured links begin with http
     */
     a[href^="http:"] {
       color: red;
     }

5. Given the following HTML code:

   <p class="box">Some paragraph.</p>

   There is no functional difference between these pairs of selectors:

   
   [class="box"] {
   
   }
   
   .box {
   
   }
   
   
   p[class="box"] {
   
   }
   
   p.box {
   
   }

6. Given the following HTML code:

   <p class="box blue">Some paragraph.</p>

   These pairs of selectors behave differently:

   /*
     selects only if the class is exactly "box"
   */
   [class="box"] {
   
   }
   
   /*
     selects if the class contains "box"
   */
   .box {
   
   }
   
   
   p[class="box"] {
   
   }
   
   p.box {
   
   }

   You might be tempted to rewrite the attribute selector as:

   [class*="box"] {
   
   }

   But that selector will match not only box, but also: matchbox, bitbox, and any other class with box in it.

   The correct substitution would be:

   [class~="box"] {
   
   }

7. Analyzing 4632 CSS rules³ from the home pages of 5 different websites⁴ revealed the following attribute selector distribution:⁵
   • 2.5% of the rules use attribute selectors
   • 85.2% of the attribute selectors use an exact match ([attribute=“value”])
   • 11.3% of the attribute selectors match the attribute ([attribute])
   • 3.5% of the attribute selectors do a partial on the start of the value ([attribute^=“val”])
   • No other attribute selector types were used
8. To see some real world selector examples using attribute selectors, consider the following from the WordPress 2016 Theme:⁶

   /*
     Style a link (<a>) only if:
     (1) the value of href begins with "mailto:"
     (2) it is somewhere inside a block with a
         class of .social-navigation
   
     :before is a pseudo-element which will be
     covered in a later tutorial. Pseudo-elements
     add 0:1:0 to specificity
   
     specificity = 0:3:1
   */
   .social-navigation a[href^="mailto:"]:before {
       content: "\f410";
   }
   
   /*
   Style a link (<a>) only if:
   (1) the value of href ends with "/feed/:"
   (2) it is somewhere inside a block with a
       class of .social-navigation
   
   :before is a pseudo-element which will be
   covered in a later tutorial. Pseudo-elements
   add 0:1:0 to specificity
   
   specificity = 0:3:1
   */
   .social-navigation a[href$="/feed/"]:before {
       content: "\f413";
   }
   
   /*
     Style <img> tags only if:
     (1) they have a class name containing
         "wp-image-"
     (2) they are somewhere inside a block with
         a class of .wp-caption
   
     specificity = 0:2:1
   */
   .wp-caption img[class*="wp-image-"] {
       display: block;
       margin: 0;
   }

References

1. CSS Attribute Selectors

The post Attribute Selectors – Advanced CSS Selectors – Part 4 appeared first on Complete, Concrete, Concise.

In the previous tutorial, you have seen how to combine CSS selectors to precisely specify an HTML element for styling and the rules by which the specificity of a CSS selector is calculated.

You will learn about combinators for combining CSS selectors to more precisely select HTML elements for styling.

Contents

1. Child Combinator
2. Descendant Combinator
3. Next Sibling Combinator
4. Subsequent Sibling Combinator
5. Closing Thoughts
6. References

Child Combinator

You were introduced to the Child Combinator in the first part of this series on Advanced CSS Selectors:

.column-left > .card > .headline {
  background-color: lightgreen;
}

The combinator > (greater-than symbol¹) specifies a direct parent-child relationship.

In the example above, it selects an element with the class of .headline only if it is an immediate child of an element with the class of .card AND the element with the class of .card is an immediate child of an element with the class of .column-left.

It has a specificity of 0:3:0.

Consider the following HTML code and the selector declared above:

<!--
  The <p> tag will be selected because the
  parent-child relationships match the selector.

  You could also use the selector:

  div > div > p

  That selector has a specificity of 0:0:3
-->
<div class="column-left">
  <div class="card">
    <p class="headline">A Headline</p>
  </div>
</div>

<!--
  The <p> tag will NOT be selected because the
  parent-child relationships do not match the
  selector

  To select the <p> tag, the selector could be:

  .column-left  > div > .headline

  That selector has a specificity of 0:2:1
-->
<div class="column-left">
  <div>
    <p class="headline">A Headline</p>
  </div>
</div>

<!--
  The <p> tag will NOT be selected because the
  parent-child relationships do not match the
  selector.

  To select the <p> tag, the selector could be:

  .card > .column-left  > .headline

  That selector has a specificity of 0:3:0
-->
<div class="card">
  <div class="column-left">
    <p class="headline">A Headline</p>
  </div>
</div>

<!--
  The <p> tag WILL be selected because the
  parent-child relationships match the selector.

  Both <p> tags are children of the parent with
  the class .card. The position of the child
  within the parent doesn't affect its selection.
  All that matters is that it is a direct child.
-->
<div class="column-left">
  <div class="card">
    <p>Some random text.</p>
    <p class="headline">A Headline</p>
  </div>
</div>

<!--
  The <p> tag will NOT be selected because the
  parent-child relationships do not match the
  selector.

  To select the <p> tag, the selector could be:

  .column-left > .card > div > .headline

  That selector has a specificity of 0:3:1

  It could also be:

  div > div > div > p

  That selector has a specificity of 0:0:4
-->
<div class="column-left">
  <div class="card">
    <div>
      <p class="headline">A Headline</p>
    </div>
  </div>
</div>

While I wrote the selector with a space around the combinator, there is no need for that. The following child selectors are also valid:

.column-left>.card.>.headline {

}

div>div>p {

}

While the direct selection method discussed in the previous tutorial can never have an #ID specificity greater than 1 (because an HTML element can never have more than 1 ID associated with it), with combinators, it is possible to have an #ID specificity greater than 1. Consider the following (based on the More Advanced float Example):

#wrapper > #title {
  /* specificity = 2:0:0 */
}

#wrapper > #navbar {
  /* specificity = 2:0:0 */
}

#wrapper > #content > .column-left > .card > .headline {
  /* specificity = 2:3:0 */
}

Descendant Combinator

This is the most commonly used combinator.

The descendant combinator is more general than the child combinator and is useful for styling different sections of your document without having to specify the exact parent-child relationships.

As you recall, when you create your HTML page, you divide the page into various sections. Common sections include:

• Header
• Navigation Bar
• Main Body
• Side Bar
• Footer

You might like to have common styles within a section, but not have to specify the exact relationship for every element in a section, but give a more general “all p tags in the Main Body, regardless of how the main body is subdivided, have the following styling”.

Consider the clone page created in an earlier lesson, it had a #content section that contained three columns:

You can style ALL p elements in the document using:

/*
  applies to all <p> tags, unless
  overridden by a more specific selector
*/
p {
  /* specificity = 0:0:1 */
}

You can also style all p elements that are immediate children of the #content section using the child combinator:

/*
  Only applies to <p> elements that are
  immediate children of a #content element,
*/
#content > p {
  /* specificity = 1:0:1 */  
}

But the child combinator will not select p elements if they are nested deeper:

<div id="content">
  <p>This will be selected.</p>
  <div class="aside">
    <p>This will NOT be selected</p>
  </div>
</div>

The descendant combinator allows you to create a selector for ALL p elements located inside a #content container – you can select immediate children, grandchildren and more deeply nested elements. The descendant combinator is a space character:²

/*
  The descendant combinator is the space character.
*/
#content p {
  /* specificity = 1:0:1 */  
}

/*
  The space character acts as a descendant combinator
  when it is alone. If you write a child combinator
  with spaces it is a child combinator, not a
  child + descendant combinator.
*/
#content > p {
  /* specificity = 1:0:1 */
}

This top selector will select all the p elements in the HTML example above, but if they are located anywhere inside a block with an ID of #content.

The bottom selector will only select those the p elements which are immediate children of a block with an ID of #content.

This is useful for defining styles that are localized to particular sections of your webpage without having to rigidly follow the structure of your page:

#header p {
  /*
    applies to all <p> tags inside #header
    specificity = 1:0:1
  */
}

#navbar a{
  /*
    applies to all links inside #navbar
    specificity = 1:0:1
  */
}

#content .sidebar img {
  /*
    applies to all images located anywhere
    inside .sidebar, when .sidebar is
    located anywhere inside #content
    specificity = 1:1:1
  */
}

#content .aside > img {
  /*
    applies to images inside #content that
    are direct children of .aside
    specificity = 1:1:1
  */
}

#footer img {
  /*
    applies to all images inside #footer
    specificity = 1:0:1
  */
}

Remember to pay attention to the specificity of your selector:

#content p {
  /* specificity 1:0:1 */
}

.aside > p {
  /* specificity 0:1:1 */
}

/*
  Even though the bottom selector looks more "specific"
  than the top selector, because the top selector says
  "select any <p> found anywhere inside #content" and
  the bottom selector says "only select <p> if it is
  an immediate child of .aside".

  However, the calculated specificity of the top selector
  is greater than the specificity of the bottom selector.
*/

Next Sibling Combinator

This is also known as the first sibling combinator and adjacent sibling combinator.

The first two combinators allow you to select HTML elements based on how they are contained within other HTML elements – either as children, grandchildren, great-grandchildren, etc.

The next sibling combinator allows you to select HTML elements in relation to other elements at the same nesting level. Consider the following:

<!-- This is a parent element -->
<div>
  <!--
    The <h1>, <p>, <p>, <ol>, <img>, and <p>
    are siblings and children of <div>
  -->
  <h1>A Header</h1>
  <p>A paragraph.</p>
  <p>Another paragraph</p>
  <!--
    While <ol> is a child of <div> and a sibling
    to <h1>, <p>, <p>, <img>, and <p>, it is also
    the parent of the <li> elements.
  -->
  <ol>
    <!-- All the <li> elements are siblings -->
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol>
  <img src="/valid/image.jpg">
  <p>Maybe a caption?</p>
</div>

Consider the following rules using the next sibling combinator (which is the plus ‘+’ symbol):

/*
  Select a <p> element if it immediately follows
  an <h1> element.

  You might want the first paragraph following
  <h1> to be special in some way - perhaps a
  slightly larger font or italicized. This could
  also be done by applying a class to the first
  <p> element.
*/
h1 + p {
  /* specificity = 0:0:2 */
}

/*
  Select a <p> element if it immediately follows
  an <img> element.

  You might use the convention that each image
  in your documents must be followed by a caption.
  You could also apply a class (like .caption) to
  the <p> element instead.
*/
img p {
  /* specificity = 0:0:2 */
}

/*
  Select an <li> element if it immediately follows
  an <li> element.

  Applied to the HTML code above, it will
  select the <li>s containing 'Item 2' and
  'Item 3' - this is because:
  - <li>Item 1</li> is the first li in the
    rule and <li>Item 2</li> is the second
    li in the rule - the one that is
    selected.
  - then <li>Item 2</li> is the first li in
    the rule and <li>Item 3</li> is the second
    li in the rule - the one that is
    selected.
  - when <li>Item 3</li> is evaluated as the
    first li in the rule, because there is
    no subsequent li, this selector isn't
    applied to anything.
*/

li + li {
  /* specificity = 0:0:2 */
}

Let’s apply these selectors to the HTML code above:

h1 + p {
  font-size: 20px;
  font-style: italic;
}

img + p {
  font-weight: bold;
  text-align: center;
}

/*
  Remove the yellow background from all list
  items, except the first one.
*/
li + li {
background-color: transparent;
}

/*
  Select all list items and set the
  background to yellow.

  I'm putting this rule here to demonstrate
  selector specificity.
*/
li {
  background-color: yellow;
}

Results in the following output:

Subsequent Sibling Combinator

This is also known as the general sibling combinator and following sibling combinator⁴.

It is similar to the next sibling combinator in specifying the relationship between child elements, except that:

1. the selected element does not need to be adjacent to the first element
2. it selects ALL subsequent elements that match

The combinator is the tilde (~) symbol.

Consider:

/*
  Select all <p> elements following an <h1>
  element as long as the <p> elements are
  all siblings with the <h1> element.
*/
h1.important ~ p {
  /* specificity = 0:1:2 */
  background-color: yellow;
}

When applied to the following code:

<p>This is a paragraph.</p>
<p>So is this.</p>
<h1 class="important">This is important!</h1>
<p>This paragraph is selected.</p>
<p>So is this one.</p>
<div>
  <p>These paragraphs are not selected.</p>
  <p>Because they are not siblings.</p>
  <p>They are nested inside a div.</p>
</div>
<p>But this paragraph is selected.</p>

Results in the following:

Closing Thoughts

1. The four types of combinators allow you to combine various selectors to create selectors based on their relationships. This allows for more powerful selection.
2. The child combinator allows you to precisely specify the parent-child relationship of the elements:

parent > child > grandchild {

}

3. The descendant combinator allows you to target elements based on whether they are nested inside other elements without caring about the specific details of the nesting:

outer-element inner-element {

}

4. The next sibling combinator allows you to select an element if it immediately follows another element:

first-element + adjacent-element {

}

5. The subsequent sibling combinator allows you to select all elements that follow the first element – as long as they are siblings:

key-element ~ following-elements {

}

6. The combinators can be combined and you can more use more specific combinations of html elements, IDs, classes, and attributes:

div#main > p.important + [reversed] {

}

7. There is no combinator that allows you to select preceding elements:

/*
  There is no select parent combinator.

  For example, you cannot style the parent
  based on the child tag.
*/
div < p {
  /* This does NOT exist */
}

/*
  There is NO preceding adjacent sibling
  combinator.

  For example, you could not select an <h1>
  element that is followed by a <p> element
*/
h1 <+ p {
  /* This does NOT exist */
}

/*
  There is no preceding sibling combinator.

  For example, you cannot select the <p>
  elements that occur before an <h1> element.
*/
h1 <~ p {
  /* This does NOT exist */
}

/*
  There is no select antedent combinator.

  For example, you cannot style an enclosing
  element based on an enclosed element.
*/
#main << .some-deeply-embedded-element {
  /* This does NOT exist */
}

8. While it may seem unfair to not allow selecting preceding elements or parents by their children or enclosing elements from interior elements, recall that the page is rendered from top to bottom. Rendering preceding elements would require rendering the page from bottom to top or from innermost elements to outermost elements and would make application of CSS rules far more complex regarding whether top-down, bottom-up, or inner-outer rules take precedence. As well, processing from the inner elements to the outer elements is computationally more expensive – making page renders slower.
9. You don’t need to use all combinators all the time. In fact, the descendant combinator is the most commonly used one. An analysis of 4632 CSS rules⁵ from 5 different websites⁶ revealed the following combinator distribution:⁷
   • 78.5% use the descendant combinator
   • 2.9% use the child combinator
   • 0.2% use the next sibling combinator
   • 0% use the subsequent sibling combinator
   • 18.4% are single item selector rules⁸
10. To see some real world selector examples using combinators, consider the following from the WordPress 2019 Theme:⁹

/*
  Styles an element with the class .comments-title
  that immediately follows a sibling element with
  an ID of #respond that is located at any level
  inside a block with a class of .comment-form-flex.

  specificity = 1:2:0
*/
.comment-form-flex #respond + .comments-title {
  display: block;
}

/*
  Styles all elements that are direct children of
  a block with the class .comments-area.

  You've seen calc() in the lesson
  "CSS – How and When to Use Float".

  'rem' will be covered in a future tutorial,
  but it is a measurement unit like px or %.

  specificity = 0:1:0
*/
.comments-area > * {
  margin-top: calc(2 * 1rem);
  margin-bottom: calc(2 * 1rem);
}

/*
  Styles any <img> nested within the three classes
  laid out below.

  specificity = 0:3:1
*/
.entry .post-thumbnail .post-thumbnail-inner img {
  position: relative;
  display: block;
  width: 100%;
}

References

1. Descendant Combinator
2. Child Combinator
3. Next Sibling Combinator
4. Subsequent Sibling Combinator

The post CSS Combinators – Advanced CSS Selectors – Part 3 appeared first on Complete, Concrete, Concise.

Understanding CSS specificity will help you understand how rules are applied to the elements on your page and allow you greater control over how your page is styled.

Contents

1. Getting Specific
2. Calculating Specificity
3. Rules for Creating Specific Selectors
4. Final Words
5. References

Getting Specific

You’ve seen that you can apply multiple styles to an HTML element like this:

<p id="first" class="important box">

And you can create individual styles for various elements on the page:

p {
  background-color: aliceblue;
}

#first {
  background-color: darkgray;
  color: yellow;
}

.important {
  font-size: 24px;
  background-color: red;
  color: black;
  border: 2px solid black;
}

.box {
  border: 1px solid black;
}

A number of rules style the same CSS properties – background-color and color – and final result depends on:

1. the priority (or significance) of the selectors
2. for selectors with the same priority, the last defined property takes priority.

Which means that the final style rule looks like this

{
  /* ID styles have highest priority */
  background-color: darkgray;
  color: yellow;
  /* font-size is only specified in .important,
     so it is applied */
  font-size: 24px;
  /* border in .box is defined after border was
     defined in .important, so it gets applied */
  border: 1px solid black;
}

This can seem haphazard and you might like to have better control over your CSS style rules – especially if later declarations can override earlier declarations.

We can overcome this by being more specific with our styling rules:

/*
  Apply this style to any element which has
  id="first" AND class="important"
*/
#first.important {
  font-size: 24px;
  background-color: red;
  color: black;
}

We can get even more specific with the following:

/*
  Apply this style to any <p> element which has
  id="first" AND class="important"
*/
p#first.important {
  font-size: 24px;
  background-color: red;
  color: black;
}

However, if you created the following rule:

/*
  Apply this style to any <p> element which has
  a class="important"
*/
p.important {
  font-size: 24px;
  background-color: red;
  color: black;
}

And you applied it to the following code:

<p id="first" class="important box">

You would find that the styles of #first would take priority over the styles in p.important despite p.important appearing to be more specific – after all, it specifies two selectors (<element> and .class) over the single ID selector.

This is because the significance of a rule depends on the specificity of the selector. CSS specificity is calculated using a few straightforward rules.

Calculating Specificity

Specificity is calculated as a string of three values¹. Many resources and tutorials show it as a single number like 000 or 130. Some tutorials show it in the form 0-0-0 or 1-3-0 – which is a better representation. I will use the following representation: 0:0:0 or 1:3:0.

The specificity number indicates the total counts of various basic selectors. The universal selector always has a specificity of 0:0:0 – so any selector with a higher specificity will trump it. As with normal numbers, the leftmost digits are more significant than the rightmost digits. Consider the ranking of the following specificities:

• 0:0:1 > 0:0:0
• 0:2:0 > 0:1:0
• 0:2:1 > 0:1:6
• 0:2:5 > 0:2:4
• 1:2:3 > 0:12:7

The specificity number is calculated as the total number of CSS specifiers used for that style rule. The totals are arranged in the following manner:

Consider the specificity of the following selectors:

* {
  /* specificity = 0:0:0 */  
}

p {
  /* specificity = 0:0:1 */  
}

.class {
  /* specificity = 0:1:0 */  
}

[attribute] {
  /* specificity = 0:1:0 */    
}

#id {
  /* specificity = 1:0:0 */  
}

p.class {
  /* specificity = 0:1:1 */
}

ol[reversed] {
  /* specificity = 0:1:1 */
}

p#id.class {
  /* specificity = 1:1:1 */
}

p#id.class[attribute] {
  /* specificity = 1:2:1 */
}

#id[attribute] {
  /* specificity = 1:1:0 */
}

.class[attribute] {
  /* specificity = 0:2:0 */
}

/*
  it looks strange, but this is valid CSS
  you can repeat the same selector over and
  over to increase its specificity.

  It does not work for <elements>, i.e. you
  can not do ppp to increase the specificity
  for <p> tags.
*/
.class.class.class.class {
  /* specificity = 0:4:0 */
}

In each case, you simply add up the total number of basic selectors, put them in the correct location and compare.

Rules for Creating Specific Selectors

1. If you specify an HTML element, then it must be at the beginning of the selector. i.e.: p[attribute] not [attribute]p.
2. There can be a maximum of 1 HTML element in a specific selector. i.e.: p.class or ul[reversed], but not pspan.class.
3. There can be a maximum of 1 #ID in a selector. This is because an element can have at most 1 #ID.
4. The order of .class, [attribute], or #ID doesn’t matter. i.e.: #ID.class is equivalent to .class#ID.
5. .class, [attribute], and #ID selectors may be repeated to increase their specificity. i.e.: .class has a specificity of 0:1:0, but .class.class has a specificity of 0:2:0.
6. You cannot repeat HTML elements. i.e.: pppp or ulul have no meaning and will be ignored by the browser.
7. All selectors are written together without spaces between them. i.e.: p.class is not the same as p .class and #id[attribute] is not the same as #id [attribute].²

Final Words

1. You can be very specific about which HTML element to style on a page by stringing together various selectors associated with that element:

   /*
     select <ul> elements which contain the
     reversed attribute
   
     specificity = 0:1:1
   */
   ul[reversed] {
   
   }
   
   /*
     select <ul> elements which contain the
     reversed attribute AND have a class of
     .class1
   
     specificity = 0:2:1
   */
   ul[reversed].class1 {
   
   }

2. Specificity is calculated by summing and arranging the total number of basic specifiers in each of the following groups:
   

   IDs

   .classes and [attributes]

   <elements>

3. In deciding which styling rule to apply, the rule with the higher specificity is applied.
4. If two rules have the same specificity then the last rule defined is applied.
5. The universal selector always has a specificity of 0:0:0.

6. There are no spaces between the selectors – it is written as one long expression.

References

1. CSS Selectors

The post CSS Specificity – Advanced CSS Selectors – Part 2 appeared first on Complete, Concrete, Concise.

We’ve seen 5 different ways to select page elements for styling. Over the next few tutorials we will add more than 50 advanced CSS selectors for targeting HTML elements for styling.

Contents

1. A Quick Recap and Introduction
2. Updated Clone Page Code
3. Final Words
4. References

A Quick Recap and Introduction

You have seen how to style HTML elements using the following selectors:

/*
  This styling will be applied to all elements on
  the page unless another style overrides it.
*/
* {
  box-sizing: border-box;
}

/*
  This styling will be applied to all <p> elements
  on the page unless overridden by a style applied
  via a .class, [attribute], or #ID
*/
p {
  color: black;
  background-color: white;
}

/*
  This styling will be applied to all elements
  with this class.

  It can be overridden by other classes or [attributes]
  that are applied to the element, but only if they are
  defined after this one.

  An #ID style will always override this style.
*/
.myStyle {
  color: blue;
  background: yellow;
}

/*
This styling will be applied to all elements
matching this attribute.

It can be overridden by other classes or [attributes]
that are applied to the element, but only if they are
defined after this one.

An #ID style will always override this style.
*/
[reversed] {
  color: white;
  background-color: black;
}

/*
  This styling will be applied to the element
  with this ID. Remember: each ID must be
  unique on the page and an element can have a
  maximum of 1 ID.

  This styling overrides any other styling
  applied to the element.
*/

#myID {
  font-size: 24px;
  color: black;
  background-color: orange;
}

This sort of styling is very direct: you explicitly specify the element you want styled and rely on inheritance to pass styles from parent to child elements.

This direct form of styling does have shortcomings – if we want to style part of the page differently, we have to explicitly create new styles for that (likely using classes) and apply them to the elements we want styled. This creates a multiplicity of style rules than can quickly become unwieldy.¹ As well, if you apply multiple styles (via classes) then the order in which the styles were defined matters.

Let’s consider the clone page created earlier: one of the things used was a card pattern for the articles on the page:

<div class="card">
  <div class="image">
    <img src="">
  </div>
  <div class="headline">

  </div>
  <div class="timestamp">🕔 2 Hours</div>
</div>

This worked fine, except that instead of using a generic class of .headline, specific headline classes were used depending on which column the card was located: .headline-small, .headline-large, and .headline-medium.

This makes moving cards from one column to another complicated because styling information (rather than content information) is embedded in the class. Moving a card requires the class be updated because its location changed.

CSS allows you to apply styles based on the context your content appears in. Consider:

/*
apply the following style to elements
with the class .headline that are
immediate children of elements with the
class .card that are immediate children
of elements with the class .left-column
*/
.column-left > .card > .headline {

}

/*
apply the following style to elements
with the class .headline if their parent
element has class .card and their
grandparent has class .middle-column
*/
.column-middle > .card > .headline {
  font-size: 32px;
}

/*
apply the following style to elements
with the class .headline only if it is
nested exactly as follows:
  class=“right-column”
      class=“card”
          class=“headline”
*/
.column-right > .card > .headline {
  font-size: 24px;
}

If you replace the .headline-small, .headline-large, and .headline-medium. style definitions in the clone page with the above code and replace their use in the HTML with .headline, you will notice everything still works correctly.

Updated Clone Page Code

You can see how the updated clone page looks here and you can see how the original clone page looks here. You can also inspect the page source code using the view source tool you learned about here or inspect the updated source code below:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Clone Page</title>
    <meta charset="utf-8"  />

    <style>

      * {
        box-sizing: border-box;
        font-family: sans-serif;
        font-size: 16px;
      }

      img {
        width: 100%;
      }

      #wrapper {
        width: 960px;
        margin: auto;
      }

      #title {
        background-color: white;
        color: black;
        padding: 8px;
      }

      #site-name {
        font-size: 32px;
        font-weight: bold;
      }

      #login {
        color: grey;
        padding-top: 8px;
        float: right;
      }

      #search {
        color: grey;
        float: right;
        padding-top: 18px;
        padding-right: 16px;
        font-size: 24px;
      }

      #navbar {
        background-color: #333333;
        color: white;
        border-bottom: 2px solid grey;
      }

      #darkbox {
        background-color: #333333;
        height: 100px;
      }

      #content {
        margin-top: -90px;
      }

      #popular {
        color: white;
        padding-left: 16px;
        font-weight: bold;
      }

      #footer {
        text-align: center;
        padding: 24px;
        background: #333333;
        color: white;
        font-size: 20px;
      }

      .nav-item {
        display: inline-block;
        padding: 24px 16px;
      }

      .column-left {
        width: 20%;
        float: left;
      }

      .column-middle {
        width: 55%;
        float: left;
        border-left: 2px solid grey;
        border-right: 2px solid grey;
      }

      .column-right {
        width: 25%;
        float: left;
      }

      .clearfix::after {
        clear: both;
        display: block;
        content: "";
      }

      .card {
        padding: 0 16px 16px 16px;
      }

      .image {

      }

      /*
      Use the more specific styling selectors
      that select HTML elements based on their
      class AND placement in the page.
      */
      .column-left > .card > .headline {

      }

      .column-middle > .card > .headline {
        font-size: 32px;
      }

      .column-right > .card > .headline {
        font-size: 24px;
      }

      .timestamp {
        padding-top: 8px;
        color: gray;
        font-size: 12px;
      }

    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="title">
        <span id="site-name">clonage</span>
        <span id="login" class="clearfix">Login</span>
      </div>
      <div id="navbar">
        <span class=nav-item>Gear</span>
        <span class=nav-item>Gaming</span>
        <span class=nav-item>Entertainment</span>
        <span class=nav-item>Tomorrow</span>
        <span class=nav-item>Video</span>
        <span class=nav-item>Reviews</span>
        <span class=nav-item>Events</span>
        <span class=nav-item>Local Edition</span>
        <span id="search" class="clearfix">⌕</span>
      </div>
      <div id="darkbox"></div>
      <div id="content" class="clearfix">
        <!--
        Update all the .headline-small,
        .headline-large, and .headline-medium
        class tags to the .headline class.
        -->
        <div class="column-left">
          <p id="popular">Popular Now</p>
          <div class="card">
            <div class="image">
              <img src="32-small-1.jpg">
            </div>
            <div class="headline">
              Foods that boost your learning
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-small-2.jpg">
            </div>
            <div class="headline">
              Robot arms may be the next
              technological frontier
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-small-3.jpg">
            </div>
            <div class="headline">
              Is virtual reality going to far?
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-small-4.jpg">
            </div>
            <div class="headline">
              The latest trends in cosplay
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>

        </div>
        <div class="column-middle">
          <div class="card">
            <div class="image">
              <img src="32-big-1.jpg">
            </div>
            <div class="headline">
              Before you buy, check our review of the
              hottest cars on the market
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-big-2.jpg">
            </div>
            <div class="headline">
              Health benefits of fresh fruits
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
        </div>
        <div class="column-right">
          <div class="card">
            <div class="image">
              <img src="32-medium-1.jpg">
            </div>
            <div class="headline">
              The best places to visit on Jupiter
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-medium-2.jpg">
            </div>
            <div class="headline">
              The latest smart watches monitor your
              body's vitals while looking stylish
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-medium-3.jpg">
            </div>
            <div class="headline">
              Keeping yourself safe while shopping online
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
        </div>
      </div>
      <div id="footer">Copyright 2018</div>
    </div>

  </body>
</html>

Final Words

You’ve received a brief introduction to one advanced CSS selector known as a combinator. This combinator (denoted with the symbol ‘>’) specifies an explicit parent-child relationship for the selection.

The next few tutorials will cover in more detail the various combinators, pseudo-classes, and pseudo-elements that can be used for advanced CSS selection of HTML elements (there are more than 50 of them).

References

1. CSS Selectors

The post Advanced CSS Selectors – Part 1 appeared first on Complete, Concrete, Concise.

You’ve implicitly encountered inheritance and default values while working with CSS.

Contents

1. Inheritance
2. Default Values
3. Table of Inheritance and Default Values
4. The ‘inherit’ Value
5. The ‘default’ Value
6. Final Words
7. References

Inheritance

When working with CSS, you probably noticed that styling like this:

.important {
  font-size: 32px;
}

When applied to HTML like this:

<div class="important">
  <p>This is important!</p>
</div>

Results in output that looks like this:

This is because the p element inherits the font-size property applied to its parent div.

Not all properties are inherited by child elements.

Consider the following CSS:

.important {
  border: 1px red solid;
}

When applied to the following HTML:

<div class="important">
  <p>This is important!</p>
</div>

Results in the border only applied to the div element and not the p element:

If the p tag inherited the border property from the parent div tag, it would have looked like this:

Which is, probably, not what you want.

Default Values

When you write some HTML like:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Hello World</title>
    <meta charset="utf-8"  />
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

You see Hello World! displayed in the browser.

It is very likely that the font will be serif or sans serif, it will be 16px in size, the text will be black on a white background, and there is no border – and you didn’t have to style anything.

This is because every CSS property has a default value. The default value may be changed through inheritance or when you explicitly set the value.

Table of Inheritance and Default Values

The following table shows which CSS properties (that we’ve seen) are inherited by child elements from their parents.

It also shows the default values for those CSS properties.

The ‘inherit’ Value

You can force a child element to inherit its parent’s property by using the CSS value inherit:

.important {
  border: 1px red solid;
}

.what-will-this-do {
  border: inherit;
}

When applied to the following HTML:

<div class="important">
  <p class="what-will-this-do">This is important!</p>
</div>

Will cause the child element to inherit the parent’s border property:

The ‘default’ Value

If you want to reset an element’s property to its default value, you can use the CSS value initial¹⁵.

Consider the following styling:

p {
  color: red;  
}
.default {
  color: initial;
}

When applied to the following code:

<p >This is some styled text!</p>
<p class="default">This is some default styled text</p>

Results in the following:¹⁶

Final Words

Child elements may inherit CSS values from their parents – it depends on the specific CSS property.

All HTML elements have default styles applied to them. Some of these styles are determined by browser settings, others from the CSS specification.

References

1. CSS Default Properties
2. CSS Inheritance
3. Firefox’s Default Style Settings
4. Chrome’s Default Style Settings

The post CSS – Understanding Inheritance and Default Values appeared first on Complete, Concrete, Concise.

This technique shows how to prevent a web site from displaying your content inside of a frame on their web page.

It looks something like this:

The section shaded in green is my content being displaying inside someone else’s web site. This is done by putting my content inside a <frame> or <iframe> tag.

This is easy to prevent, but it requires editing your .htaccess file.

Why is this a problem?

First, someone else is using your hard work this means a potential loss of traffic to your site.

Second, someone can be benefitting from your work if they run ads on their site.

Third, it dilutes your content: you created it, you should keep control over it.

Finally, some sites doing this can be “clickjacking” using your site and content. Essentially, they use your content to drive traffic (or force downloads) by putting up invisible buttons. This type of behaviour can tarnish your web site’s reputation.

Preventing Framing

1) Open your .htaccess file for editing.

2) Add one of the following lines:

Header append X-FRAME-OPTIONS "DENY"

or

Header append X-FRAME-OPTIONS "SAMEORIGIN"

3) Save the .htaccess file.

Other Options

A commonly promoted option is something called a “Framebuster”. This is a piece of javascript code that tries to force your web page out of the frame. Unfortunately, it can be defeated if (1) the user has javascript turned off, or (2) the web site framing your content runs anti-framebuster code. You can read more here (note: this is an external site).

The other common option is to add code to .htaccess to have the rewrite engine reload the page from the correct URL. I tried this technique first, but it didn’t work for me. The page I got this from is here (note: this is an external site).

The post How to Prevent People from Displaying Your Content on Their Web Pages Inside of a Frame appeared first on Complete, Concrete, Concise.

Replacing the toner cartridge in the Brother HL-3140CW laser printer is not difficult, but it is not immediately obvious because the toner and drum assembly are joined together.

1) Open the laser printer by lifting the the top part. There are no catches to unlock, so it is easy enough to open:

2) Remove the toner cartridge to replace. It will be one of the four cartridges shaded in green. The entire cartridge assembly lifts right out, there are no latches to unlock:

3) Lay the toner and drum assembly on a clean, flat surface (preferably with a sheet of paper underneath in case some toner spills out) with the green tabs facing up:

4) Press down on the green latch (bottom left, if you have oriented your assembly like the image above) to unlatch the toner from the drum and remove the toner:

5) Insert the new toner into the drum assembly. It should fit and latch easily.

6) Slide the green slider on the drum assembly back and forth a few times. Remember to return it to its latched position.

7) Reinsert the toner and drum assembly back into the printer. It should drop in easily.

8) Close the printer an wait for it to go through its cycle.

The post Replacing the Toner Cartridge in a Brother HL-3140CW Printer appeared first on Complete, Concrete, Concise.

This tutorial is for Ubuntu 13.04.

It is probably the same for other versions of Ubuntu and (probably) most other Linux distributions, but no guarantee is made.

Detailed instructions for opening a command line / terminal can be found here.

When you work at the command line, from time to time, it may be necessary to edit files.

You can use an editor like gedit (the GUI based editor that comes with Ubuntu), however, by default, it will not permit you to edit system configuration files (which are likely the files you are trying to edit if you happen to be at the command line).

Starting gedit with Administrator Privileges

Enter the following command to start gedit with administrator privileges:

sudo gedit

You can also append the file you wish to open to the command. This will cause gedit to automatically open the file. For example:

sudo gedit history.log

Editing with nano

Sometimes, you cannot use gedit because you have no graphical interface (GUI) – for example, you need to edit some x-server settings because you can’t get a graphical display, so you are exclusively at a command line.

While vi or one of its clones (vim, elvis, nvi, and vile to name some) tend to be the preferred text editor among Unix / Linux geeks – it is not the friendliest for casual (or one-off) users. The other major editor is emacs, but it is not installed by default in Ubuntu and it is not user friendly either.

nano is a clone of the pico editor.

To launch nano enter the command:

sudo nano

Using nano

nano is a simple editor that allows you to navigate through the text using the arrow keys on your keyboard.

At the bottom of the screen, there are two lines (highlighted in blue) that display a number of common commands.

The caret (^) symbol means Ctrl, as in, Ctrl + X. This means, “while holding down the Ctrl key, you press the other key as though you intend to type it”.

The most common commands you are likely to use are:

• ^X – (Ctrl + X) exit the editor
• ^O – (Ctrl + O) save / write the contents of the editor
• ^R – (Ctrl + R) open / read another file

If you decide to browse through the help (Ctrl + G), then be aware of the following:

• ^^ means Ctrl + ^ not Ctrl + Ctrl
• M- means the Alt key. The Alt key is used the same way the Ctrl key is: it is held down while another key is typed. For example: M-\ means: while holding down the Alt key, press the \ key as though you intend to type it.
• Some commands have parentheses around them, the parentheses are not to be typed. For example, (M-X) simply means Alt + X – the parentheses have nothing to do with it and should be ignored.

The post Ubuntu 13.04 – Command Line Basics: Editing Files appeared first on Complete, Concrete, Concise.

This is a basic tutorial for the Unity Interface / Desktop which comes with Ubuntu 13.04 – it should help get you up and running.

Each new version of Unity (introduced in 11.04) improves on the functionality of the desktop.

The Unity interface consists of four main parts:

1. Panel
2. Launcher
3. Dash
4. HUD

The Panel

The Panel is the strip at the top of the interface:

The menu bar that you are used to seeing near the top of an application’s window is now displayed in the panel:

There is a catch:

1. The menus displayed in the Panel are only for the active (topmost) application window.
2. The menus are only displayed when you hover your mouse over the Panel, otherwise, the Panel is empty.
3. If a window is maximized (full screen), the buttons (icons) for minimize, maximize, and close are hidden unless you hover your mouse over the panel.

This might seem like a step backward. Why hide the menu bar? Why make the user have to move the mouse all the way to the panel to access it? While it gives a little extra window space to the application, it is also inefficient – and this was the problem with Unity in Ubuntu 11.04 and 11.10.

Since Ubuntu 12.04, Unity has the HUD. The HUD makes mousing / navigating through menus obsolete (mostly).

Additional things displayed in the Panel include:

• the name of the active (topmost) application (green)
• various indicators (blue)
• the time (yellow)
• the system menu (red)

The Launcher

This is the panel of buttons on the left hand side of the screen:

It serves 3 functions:

1. Application Launcher: clicking on an icon will launch the application associated with that icon. e.g. Clicking on the FireFox icon launches the FireFox browser.

2. Visual indicator of running applications: any running application has its icon placed in the Launcher and an indicator showing its status.
   1. Two solid triangles: this is the active application (the one on top).
   2. Single solid triangle: the application is running, but does not have focus (is not on top).
   3. Single open triangle: the application is running in a different workspace (by default, Ubuntu 13.04 sets up only a single workspace. You can read how to enable workspaces here.).

   

3. Application Switcher: you can switch to an application (bring it to the front) by clicking on its icon in the Launcher.

Removing an Application from the Launcher

The Launcher can become cluttered with applications (when you install an application using the Ubuntu Software Center, it is usually automatically placed in the Launcher).

1) Right-click on the application you want to remove from the launcher. This will display a popup menu.

2) Click on Unlock from Launcher in the popup menu:

Adding an Application to the Launcher

Sometimes, an application is not added to the Launcher, or you had previously removed it.

1) Start the application / program you want to add to the Launcher.

2) Find the application’s icon in the Launcher.

3) Right-click on the icon. This will display a popup menu.

4) Click on Lock to Launcher to add the program to the Launcher:

Dash

Instead or navigating a hierarchy of menus, Dash provides a query field in which you type the name of the application or document you want to open.

Using the Dash interface is very much like searching with Google – as you type in what you are looking for, Dash displays possible results.

Dash is activated by either:

1) Clicking on the Dash icon in the Launcher:

2) Tapping the Windows key on your keyboard

The Dash panel looks something like this (click for a larger image):

It is divided into upto 5 sections:

1. The query field (outlined in green) is where the keyboard focus goes when you activate the Dash.

   Type the name of the application you want to run, or document you want to open. As you type, Dash will update the list of applications and documents.

   It has improved greatly since 11.04, if you type in game you will get Mahjong, AisleRiot Solitaire and Freecell Solitaire, and Sudoku.

   I suspect it may still miss certain applications because they are not listed in the “obvious” way. For example, previous versions of Unity would not display Sudoku if you typed in game – you needed to type in puzzle.

   If you type in games it will only display AisleRiot Solitaire, but none of the other games.

2. A list of the most recently used applications (outlined in red) is displayed. If you type in the query field, the list of applications is modified to match your search.

   You can use your mouse to select an application, or you can use the arrow keys to navigate to the desired application (and then press Enter. I like using the arrow keys because my hands don’t have to leave the keyboard.

3. A list of the most recent viewed documents (outlined in blue) is displayed. If you type in the query field, the list of documents is modified to match your search.

   You can use your mouse or the arrow keys to navigate and select the desired document. I like using the arrow keys because my hands don’t have to leave the keyboard.

4. Relevant search results from Amazon (outlined in yellow) . As you type your query, it is sent to Amazon (anonymously via Ubuntu) and relevant results are displayed.

   Many people find this intrusive and disable this feature. Instructions to disable Amazon search results are here.

   I don’t have a problem with it, but wish it was more customizable. For instance, I don’t want Amazon search results in my main Dash panel. I don’t mind them if I am using the music lens or movie lens (explained in more detail below). Unfortunately, there is no way to selectively enable Amazon search results.

5. At the very bottom of the Dash (shaded in green) are a number of icons. These are “lenses”. A lens is a specifically focussed (or themed) query. The five lenses at the bottom are:

   1. Dash lens: this is the default lens – it searches everything you are possibly connected to which includes your computer as well as any cloud services you use.
   2. Applications lens: this focuses searches only within applications.
   3. Folders and Documents lens: this focuses searches only on folders and documents.
   4. Music lens: focuses search on music.
   5. Photos Lens: focuses search on photos.
   6. Video lens: focuses search on videos.

   You can navigate to the lenses using either the mouse or keyboard.

   Typing Ctrl + Tab will navigate through the lenses.

   Note: typing Ctrl + Tab means, “While holding down the Ctrl key, press the Tab key as though you intend to type it.”

   If you hold the Windows (Super) key down for a few seconds, a cheat sheet of commands will be displayed (click for larger image):

   

   Note: the cheat sheet only appears if your screen resolution is 1024×768 or greater.

   HUD

   The HUD was introduced in Ubuntu 12.04 and combined with Dash it provides a powerful way of interacting with your applications.

   Just as Dash replaces navigating a hierarchy of menus to find applications and documents, HUD replaces navigating a hierarchy of menus in an application.

   Like anything new, it feels all wrong, but, I found it very easy to pick up and now prefer it over the traditional menu navigating paradigm.

   Instead or navigating a hierarchy of menus, HUD provides a query field in which you type the name of the action you want to perform with your applications.

   Normally, to do something in a program you either use a keyboard shortcut (like Ctrl+B to bold text in a word processor), or you use the mouse to select an option from a menu or toolbar.

   With HUD, you type in what you want to do. The HUD interface will then locate appropriate / matching menu entries and display them to you to select. Again, you can use the mouse to perform the selection or the arrow keys and the Enter key.

   I think the greatest strength of HUD is that you can navigate it completely via the keyboard, so you never alternate between typing and reaching for the mouse.

   The HUD is activated when you tap on the Alt key:

   Note: tapping the Alt keys means pressing it as though you intend to type it. It does not mean holding down the key.

   If you hold the Alt key down for about 2 seconds, the application menu bar will display in the Panel. As soon as yo let go of the Alt key, it will disappear – thus encouraging use of the keyboard to select a menu option (e.g. Alt + F to open the File menu).

   

   The HUD panel looks something like this:

   

   1. The query field (outlined in red) is where you type the operation you want to perform in the application, e.g. open, new, auto white balance, etc.

      This is where the focus goes when you activate the HUD.

      As you type, a list of possible commands will be displayed below it. You can navigate those commands using the mouse and clicking to select or the keyboard (arrow keys) and pressing Enter to select. By default, the top command is always selected and will be executed if you press Enter. A nice thing is that you do not have to type the whole command.

      Note: if a command is not available (for example, it is greyed out), then it will not appear in the list of commands.

      For example, if you have just opened GIMP without any image, it is not possible to perform image operations on it (like unsharp mask, or auto color enhance, etc). So if you type unsharp into the query field, you will not receive any options.

      I think it would be better if the HUD somehow indicated that the operation is unavailable rather than just not showing it at all.

   2. On the left, the icon (outlined in green) shows which application the command is for.

      The HUD may display commands for other programs (not just the active one). This can be confusing if you are not paying attention.

   3. Below the query field is a list of matching commands (outlined in blue.

   Note: HUD may not work with all applications – it depends on how the menus in an application were coded. Prior to Ubuntu 13.04, LibreOffice was an application that did not work with the HUD (there was a patch available to make it work, though).

   Final Words

   Unity is a new way of interacting with the computer: instead of navigating a hierarchy of menus, you type what you want to do.

   As an old timer (my first interactions with a computer were via a teletype), I never really liked the mouse / GUI way of doing things because it required me to take one hand off the keyboard. As a consequence, I have always configured shortcut keys to perform common tasks.

   With Unity, I am able to keep my hands on the keyboard and easily perform the tasks I need. I still program my shortcut keys, but I know longer have to navigate through menus to find some lesser used operation.

   Play with it. I think you will find it easy to learn. I have found it easier to adapt to than the Ribbon interface Microsoft introduced a few years ago.

   I find the Dash and HUD work well when I am very familiar with the programs / applications I am working with and I know the command set.

   I find the HUD awkward to work with when I am not familiar with an application. For example, perhaps I install Blender to try out some 3D graphics development. Not being familiar with Blender, it is very awkward to try typing commands into the HUD in the hope of finding the right one. This is definitely a case where being able to browse through a bunch of menus can be helpful.

   Of course, I can always type help and hope a help file comes up.

   It is with new or unfamiliar applications that I miss the menu bar at the top, but even if a menu bar was visible, there have been times when I could not find what I wanted and had to google to discover how it was named or where it was located.

   Additional Resources

   While these aren’t tutorials, they offer some insight into Canonical’s focus and direction (they are written by Mark Shuttleworth – Canonical’s CEO):

   Introducing the HUD. Say hello to the future of the menu.

   Dash takes shape for 11.10 Unity (note: the Dash panel has changed somewhat from the screen capture he presents)

   This shows a side by side comparison between using the tradition menu driven way to perform a task and using HUD. While a number of commenters have complained that it isn’t an objective comparison, I think it shows very nicely the difference in working in both environments:

   This is another video showing the HUD In action:

   The post Ubuntu 13.04 – Basic Unity Interface / Desktop Tutorial appeared first on Complete, Concrete, Concise.

   ]]> https://complete-concrete-concise.com/ubuntu-2/ubuntu-13-04/ubuntu-13-04-how-to-display-hidden-files-and-folders/ Mon, 29 Apr 2013 11:33:26 +0000 http://complete-concrete-concise.com/?p=2902 Learn how to display hidden files in Ubuntu 13.04 running the Unity Desktop and using the Nautilus file manager.

   The post Ubuntu 13.04 – How to Display Hidden Files and Folders appeared first on Complete, Concrete, Concise.

   ]]>

   This tutorial is for Ubuntu 13.04 running the Unity Desktop and using the Nautilus file manager – this is the default configuration for Ubuntu 13.04.

   The instructions may be the same or similar for other versions but no guarantee is made.

   Note: for some reason, Nautilus has changed quite drastically in Ubuntu 13.04 from previous versions. Not sure, yet, if this is heavy Ubuntu customization or changes in Nautilus itself. On significant (minor?) change is that in the About dialog, it is now called Files – never mind that it shows up as nautilus in the process viewer.

   

   1) Open the Files application:

   2) Tap the Alt key. Note: tapping the Alt key, means pressing it as though you intend to type it. It does not mean holding the key down. This will bring up the HUD:

   

   3) Type preferences into the HUD query field:

   

   4) Press the Enter key. This will open the Preferences dialog:

   Note: you can press the Enter key as soon as Preferences is the topmost displayed option.

   You can also select Preferences by clicking on it with your mouse, or navigating to it using the keyboard arrow keys and pressing Enter.

   

   5) Click on the Show hidden and backup files checkbox to enable it. Click on Close

   :
   

   6) Restart the Files application to enable the setting.

   I think this is a bug because I would expect the changes to take place immediately after closing the Preferences dialog.

   The post Ubuntu 13.04 – How to Display Hidden Files and Folders appeared first on Complete, Concrete, Concise.

   ]]> https://complete-concrete-concise.com/ubuntu-2/ubuntu-13-04/ubuntu-13-04-how-to-enable-multiple-workspaces/ Fri, 26 Apr 2013 13:58:20 +0000 http://complete-concrete-concise.com/?p=2850 Ubuntu 13.04 set the number of workspaces to 1, learn how to up that number.

   The post Ubuntu 13.04 – How to Enable Multiple Workspaces appeared first on Complete, Concrete, Concise.

   ]]>

   These instructions are for Ubuntu 13.04 running the Unity interface.

   The instructions may be similar for other versions, but no guarantee is made.

   An article on how to switch between workspaces can be found here.

   In Ubuntu 13.04, the number of workspaces was set to 1. This is probably the way most people use their computer anyway – a single workspace where all their application windows are open. However, some users (like me) like to have multiple workspaces because it allows for multiple full screen applications to be open simultaneously without overlapping.

   1) Tap the Windows (Super) key to open the Dash panel:

   Note: tapping the Windows keys means pressing it as though you intend to type it. It does not mean holding down the key (holding down the key does something else).

   Ubuntu calls this the Super key

   

   2) Type appearance into the Dash search field:

   

   3) Press the Enter key to launch the Appearance application:

   Note: pressing the Enter key will select the first Dash entry. If Appearance is not the first entry, then use the keyboard arrow keys or mouse to navigate to the appropriate icon.

   If pressing Enter does not launch the Appearance management dialog, then click on the Appearance icon.

   4) Click on the Behaviour tab:

   

   5) Click on the Enable workspaces checkbox to enable workspaces:

   
   

   The post Ubuntu 13.04 – How to Enable Multiple Workspaces appeared first on Complete, Concrete, Concise.

   ]]> https://complete-concrete-concise.com/ubuntu-2/ubuntu-13-04/ubuntu-13-04-how-to-switch-between-workspaces/ Fri, 26 Apr 2013 13:57:48 +0000 http://complete-concrete-concise.com/?p=2856 These instructions are for Ubuntu 13.04 running the Unity Desktop. They may be similar or the same for other versions, but no guarantee is made. There are three ways to switch between workspaces. Your preference will depend on how you navigate your desktop. Using the Arrow Keys Press Ctrl + Alt + <arrow key> to […]

   The post Ubuntu 13.04 – How to Switch Between Workspaces appeared first on Complete, Concrete, Concise.

   ]]>

   These instructions are for Ubuntu 13.04 running the Unity Desktop.

   They may be similar or the same for other versions, but no guarantee is made.

   There are three ways to switch between workspaces. Your preference will depend on how you navigate your desktop.

   Using the Arrow Keys

   Press Ctrl + Alt + <arrow key> to navigate between workspaces.

   Note: pressing Ctrl + Alt + <arrow key> means, “while simultaneously holding down the Ctrl key and the Alt key, press an arrow key as though you intend to type it.”

   There are a few things to be aware of:

   1. the arrow keys on the numeric keypad do not work – you have to use the dedicated arrow keys. Additionally, if NumLock is on some of the key presses will resize and reposition your application windows.
   2. the default arrangement of the workspaces is a 2×2 grid.
   3. if a key press cannot navigate to a new workspace then nothing happens (for example, if you are in the first workspace, which is located in the top left corner, then pressing the up or left arrow key will do nothing).
   4. if you do navigate to a new workspace, in the centre of the screen will be displayed a a small grid of the workspaces. See image below, click for the full size version.

   

   Using the Windows (Super) Key

   Press Windows + S.

   Note: pressing Windows keys means, “while holding down the Windows (Super) key, press the S key as though you intend to type it”.

   Ubuntu calls the Windows key the Super key

   

   This will cause all the workspaces to be displayed simultaneously. See the image below, click for a full size version:

   

   Things to be aware of:

   1. you can navigate the workspaces using the arrow keys. The selected workspace will be brighter and have a coloured border (by default an orange colour). You can go to the selected workspace by pressing the Enter key.
   2. you can select a workspace by clicking on it with your mouse.
   3. you can drag windows from one workspace to another using your mouse.

   Clicking on the Workspace Switcher Icon

   Click on the Workspace Switcher icon which is located near the bottom of the Launcher ribbon:

   

   This will present the same workspace view as the Windows + S method. Navigation is exactly the same as for Windows + S
   

   The post Ubuntu 13.04 – How to Switch Between Workspaces appeared first on Complete, Concrete, Concise.

   ]]>