Website Development Prices

Search Blog

Sunday, February 28, 2016

CSS: Selectors

The selector is a term that defines on what HTML tags is necessary to apply the rule.

Selectors may be:
  • names tags - the declaration applies to all such tags
  • id elements - the declaration refers only to an element with this unique identifier
  • class elements - the declaration applies to all the elements that have the value within the class attribute. The attribute class can have more words and then each word is a separate class.
  • combination of selectors - for example, an element with a certain tag, under condition that has a certain class.
To select elements with a certain identifier you should use "#" in front of the id, and to select class elements "." in front of desired class.

Example:


HTML code

<p id="firstid">
This is first paragraph. Lorem ipsum dolor sit amet,<br /> consectetur adipiscing elit. Maecenas eu urna <br />elementum libero eleifend molestie. 
</p>
<p class="blue">
Paragraph with class blue. Ut massa justo, fringilla a <br />scelerisque quis, pretium eu tortor. Cum sociis <br />natoque penatibus et magnis dis parturient montes,<br /> nascetur ridiculus mus. 
</p>
<p>
Pargraph. Duis tristique lacus nec blandit fringilla. <br />Sed at diam a massa hendrerit varius. Morbi vitae <br />mattis urna. Cras condimentum erat metus, eu vulputate <br />est vehicula vel.
</p>
<ul class="violet">
<li>Suzuki</li>
<li class="red">Ducati</li>
<li>KTM</li>
</ul>

CSS code

h3 {
color: darkgreen;
}

/* selects all paragraphs */
p {
color: green;
font-size: 22px;
}

/* selects all elements with the class blue */
.blue {
color: blue; 
}

/* selects the element with id firstid */
#firstid {
font-size: 26px;
}

/* selects unordered list with a class blue */
ul.violet {
font-size: 22px;
color: violet;
}

/* selects all elements with the class of 
red inside the <ul></ul> tags */
ul .red {
color: red;
}

Result:


Explanation: the first rule applies to all paragraphs in the document. The second rule - to all tags that have a class of blue. The third rule - the tag that has the identifier firstid. Forth rule - if two rules come together, both are applied. Fifth rule - if the two elements, which could be independent selectors, lay next to each other with a single space between them, first, it will be found all HTML elements that meet the first part of a selector, and then in their content of all the elements that satisfy the second part of selectors. The text in the paragraph has default green color, unless class is set to blue, which explicitly sets the blue text. A list that has a class of violet also has a defined violet color of the font so that it applies to all items contained in it. Only the second item has class red, so the text color will be in red.

Context selectors



Selectors in CSS rules can directly reference the specific elements or to define the rules by which to define the elements in relation to any one specific element, for example:

  • elements that are located in an element
  • elements that are located behind an element
CSS SELECTORS         DESCRIPTION

div p                                finds all <div> elements and selects all paragraphs in them

div *                                finds all <div> elements and selects all the elements in them

div > p                            selects all <p> elements where the parent is a <div>

div > * > p                     finds all <div> elements and then all the elements that are directly in                                           them, than selects all paragraphs that are direct "children". In general,                                         finds all the paragraphs that are "children" on the second level of div                                             elements.

div + p                        finds all <div> elements and finds paragraphs that are directly behind                                      them                         

.center div + p > a      finds elements with class center, and then in it all div blocks. Then, for                                        each <div> finds paragraph that is located directly behind it, and                                                  selects all links that are found in paragraphs, but as a direct "children",                                        ignoring those that are more deeply nested.




The rule is that the selector reads from left to right. First finds all the elements that satisfy the first rule, and then moves on to the next part, until it comes to the right element in the selector, which defines what should be selected.

Pseudo-class


Pseudo-classes are used to define a specific condition of the item.

For example, can be used for:
  • styling elements when a user mouses over it
  • styling the visited and not the visited links differently
  • styling elements when it receives focus
Example 2:

HTML code

<p><a href="http://www.marijarikic.com/sr/" target="_blank">This is a link</a></p>
<p><strong>Note:</strong> a:hover must come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><strong>Note:</strong> a:active must come after a:hover in the CSS definition in order to be effective.</p>

CSS code

/* unvisited link */
a:link {
    color: green;
}

/* visited link */
a:visited {
    color: darkviolet;
}

/* mouse over link */
a:hover {
    color: red;
}

/* selected link */
a:active {
    color: blue;
}

Result:


Example 3:

HTML code

<ul>
<li>Austria
<ul>
<li>Husqvarna</li>
<li>KSR Moto</li>
<li>KTM</li>
</ul>
</li>
</ul>
<br /><br />
<p>Pargraph. Duis tristique lacus nec blandit fringilla. <br />Sed at diam a massa hendrerit varius. Morbi vitae <br />mattis urna. Cras condimentum erat metus, eu vulputate <br />est vehicula vel.</p>

CSS code

li ul {
display: none;
}

li:hover ul {
display: block;
}

Result:


Media queries

The attribute media can be placed either on the <link> or <style> tag and serves to define whether included style needs to be used for displaying on the screen - screen, for printing - print, for displaying on the projector - projection, for displaying on mobile device - handheld, for displaying on the TV screen - tv.

In addition to the types of devices, browser can determine:
  • width and height of the screen device (device-width and device-height) or space in which is shown the page (width and height)
  • an orientation that tells whether the content will be seen in landscape or portrait mode
  • whether the device is monochrome or color, and what is the image quality in terms of resolution - resolution or number of bits by which to represent  color - color.
Example 4:

<!-- media queries -->
<link rel="stylesheet" type="text/css" href="css/desktop.css"> 
<link rel="stylesheet" type="text/css" href="css/print-portrait.css" media="print and portrait orientation"> 
<link rel="stylesheet" type="text/css" href="css/print-landscape.css" media="print and landscape orientation"> 
 <link rel="stylesheet" type="text/css" href="css/mobile-320.css" media="screen and device-width: 320px"> 
<link rel="stylesheet" type="text/css" href="css/projector.css" media="projection, handheld and max-width: 300px"> 
<link rel="stylesheet" type="text/css" href="css/tv.css" media="tv and device-aspect-ratio: 16/9">


Complete code used in examples.



No comments:

Post a Comment

Note: Only a member of this blog may post a comment.