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

Both sides previous revision Previous revision
Next revision 		Previous revision
en:web_development:tables:selectors [2021/12/10 05:24]
mag 		en:web_development:tables:selectors [2023/08/16 09:33] (current)
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 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.1639142641.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