Given I define css selectors: "dataTable"

Define named CSS selectors in bulk for the current scenario.

Given (I |we )*define css selectors:

Example #1:

Given I define css selectors:
	| header  | #header        |
	| nav     | nav.primary    |
	| footer  | footer         |

Example #2:

Given I define css selectors:
	| logo    | .site-logo     |
	| search  | #search-input  |

Example #3:

Given I define css selectors:
	| hero    | .hero-banner   |
	| content | .main-content  |
	| sidebar | .sidebar       |

Example #4:

Given I define css selectors:
	| menu    | ul.menu        |
	| button  | .cta-button    |

Example #5:

Given I define css selectors:
	| top bar | .top-bar       |
	| page    | #page-wrapper  |
	| footer  | .site-footer   |

Example #6:

Given we define css selectors:
	| modal   | .modal-dialog  |
	| overlay | .modal-backdrop |

Example #7:

Given define css selectors:
	| heading | h1             |
	| list    | ul             |

Example #8:

Given I define css selectors:
	| left    | .col-left      |
	| center  | .col-center    |
	| right   | .col-right     |

 Advanced:

Example #9: Layered page-shell selectors:

Given I define css selectors:
	| topbar  | .topbar         |
	| header  | header.site     |
	| nav     | nav[role=navigation] |
	| main    | main            |
	| footer  | footer          |