mahuntington
/
css-notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '19a17b548a'
${ noResults }
css-notes/5. Responsive Design and Ad.../1. ADVANCED_SELECTORS.md

1.9 KiB
Raw Blame History

CSS - Advanced Selectors

Lesson Objectives

  1. Explain why we need advanced selectors
  2. List advanced selectors

Explain why we need advanced selectors

Advanced selectors help eliminate extra classes. They provide no new functionality, but they make your code cleaner

List advanced selectors

Family Selectors

  • *

    • selects everything

    • useful for when you want to style everything. Can add an optional ancestor for more specificity

      	<div>
		<a class="style-me">content</a>
		<a class="style-me">content</a>
		<span class="style-me">content</span>
	</div>

  • >

    • selects an immediate child

    • if you want to add styling to just a child, but the parent has descendants that are similar to child

      	<ul>
		<li>
			<ul>
				<li></li>
			</ul>
		</li>
	</ul>

  • ~

    • sibling selector

    • only selects subsequent siblings, not preceding siblings

      	<h1>Title</h1>
	<p>paragraph</p>
	<ul>
		<li><p>list paragraph</p></li>
	</ul>
	<p>paragraph</p>

  • +

    • immediate sibling selector

    • only selects first sibling

      	<h1>Title</h1>
	<p>paragraph</p>
	<ul>
		<li><p>list paragraph</p></li>
	</ul>
	<p>paragraph</p>

Attribute Selectors

You can test for any attribute, not just id/class

Here's our example: <a href='http://www.google.com'>link</a>

  1. [attr]
    • test to see if an attribute exists
    • a[href]
  2. [attr='foo']
    • test an exact match
    • a[href="http://www.google.com"]
  3. [attr^='foo']
    • test the start of the attribute
    • a[href^="http"]
  4. [attr$='foo']
    • test the end of the attribute
    • a[href$="com"]
  5. [attr*='foo']
    • test a substring
    • a[href*="w.goo"]
  6. [attr~='foo']
    • test an exact word separated by space
    • <a data-values="value1 value2">link</a>
    • a[data-values~="value2"]
  7. [attr|='foo']
    • test the start of a hyphenated word
    • <html lang="en-US">
    • html[lang|="en"]