Tech School

User Tools

Site Tools

Trace:
en:web_development:tables:selectors

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision 		Previous revision
en:web_development:tables:selectors [2021/12/07 14:00]
mag created 		en:web_development:tables:selectors [2023/08/16 09:33] (current)
Line 5: Line 5:
  
 ==== Setup ==== ==== Setup ====
-  * As usual, we'll build on previous work in this activity using [[https://jsfiddle.net|jsfiddle]]. Here's the code again. +  * We'll build on previous work in this activity using your 'tables.html' and 'style.css'. Here's the code again. 
-**HTML**+**tables.html**
 <code><table> <code><table>
   <thead>   <thead>
Line 49: Line 49:
 </table></code> </table></code>
  
-**CSS**+**style.css**
 <code>td, th { <code>td, th {
   border-width: 1px;   border-width: 1px;
Line 69: Line 69:
   * You may have noticed that using styles in HTML lets you change a single element, while using CSS lets you change all associated elements, but what if you want to change just certain elements?   * You may have noticed that using styles in HTML lets you change a single element, while using CSS lets you change all associated elements, but what if you want to change just certain elements?
   * To do this we use selectors, which identify the specific elements you want to treat differently.   * To do this we use selectors, which identify the specific elements you want to treat differently.
-  * The first of these is <html><id></html> which identifies one single element in the page. It must be unique.+  * The first of these is <html>id</html> which identifies one single element in the page. It must be unique.
   * Let's highlight the data for Carlos in yellow.   * Let's highlight the data for Carlos in yellow.
   * First, we need to specify the row, but giving it an <html>id</html>. Let's call it 'carlos'.   * First, we need to specify the row, but giving it an <html>id</html>. Let's call it 'carlos'.
Line 135: Line 135:
 <code>#carlos .age { <code>#carlos .age {
   font-weight: 900;   font-weight: 900;
-}+}</code>
   * We can also limit in other ways, One is to use a combination of elements and classes.   * We can also limit in other ways, One is to use a combination of elements and classes.
   * The following code will only change the non-heading (data) cells with the age class.   * The following code will only change the non-heading (data) cells with the age class.
Line 144: Line 144:
   * Notice the difference between the last two examples. The first <html>#carlos .age</html> with a space between the options says to select the elements with class age inside the element with id carlos. The second <html>td.age</html> has no space, which says to select elements that are both data cells and class age.   * Notice the difference between the last two examples. The first <html>#carlos .age</html> with a space between the options says to select the elements with class age inside the element with id carlos. The second <html>td.age</html> has no space, which says to select elements that are both data cells and class age.
   * There are many other ways of specifying and combining selectors, but these are the main ones you'll use often. For more, follow the link on the Summary page.   * There are many other ways of specifying and combining selectors, but these are the main ones you'll use often. For more, follow the link on the Summary page.
 +
 +==== Final Code ====
 +  * [[https://techschool.murraygunn.id.au/webdev/classes/tables/3/en.php|tables.html]]
 +  * [[https://techschool.murraygunn.id.au/webdev/classes/tables/3/style.php|style.css]]
 +  * [[https://techschool.murraygunn.id.au/webdev/classes/tables/3/tables.html|result]]
  
 [[en:web_development:tables:arrays|Next: Javascript Arrays and Loops]] [[en:web_development:tables:arrays|Next: Javascript Arrays and Loops]]
en/web_development/tables/selectors.1638914403.txt.gz · Last modified: 2023/08/16 09:33 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki