thiscodeWorks - Organizing the best of code online

#css #selector #custom-properties #variables

:root {
  --color-main: #333333; 
  --color-alert: #ffecef;
}

.error { 
	color: var(--color-alert); 
}

#css #selector #attribute #link

select link with no<a>-text

/* Use #CSS attribute selectors to display links when <a> has no text value but the `href` has a link. */

a[href^="http"]_empty::before {
    content: attr(href);
}

#css #selector #pseudo

variou spseudo element selectors

::first-line	
/*Selects the first line of content in an element. Typically applied to paragraphs (for example p::first-line). Useful for first-line run-in effects.*/

::first-letter	
/*Selects the first letter of an element. Typically applied to paragraphs or headings (for example, p::first-letter). Useful for creating initial and drop caps.*/

::before	
/*Inserts content before a selection. Has all sorts of uses: generating opening quote marks for pull quotes, creating separators for navigation bar links, and much more.*/

::after	
/*Just like ::before, with all the same uses, but generates content after a selection.*/

::selection	
/*Changes the appearance of selected text.*/

#css #selector #has

pseudo-element "has"

a:has( > img ) { 
	border: 1px solid #000; 
}

#css #selector #only

Only Child Selector

header img:only-child { 
	width: 100%; height: auto; 
}

#css #selector #not

not-selector

ul li:not(.active) {}

#css #selector #not

not pseudo class

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

#css #selector #not

Not last child

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

#css #selector #list

list with not selector

/* list with not selector */

.post > *:not( img ):not( video ) {
    margin-left: auto;
    margin-right: auto;
    max-width: 50rem;
    padding-left: 5%;
    padding-right: 5%;
}

#css #selector #empty

hide empty elements

p:empty {
	display:none;
}

#css #selector #attribute

Check attribute value

div[class*="left"] {
	float: left;
}

#css #selector

Sibling Selector

/* all ULs after p */
p ~ ul {
background-color: #f00;
}

#css #selector

General sibling selector

/* General sibling selector */
h4 ~ p {
    font-weight:bold;
}

#css #selector

General Sibling Combinator

/*
General Sibling Combinator
*/

figure ~ p {}

#css #selector

First or last element

article:first-of-type,
article:last-of-type {
	margin: 10px 0;
}

#css #selector

Element not only child

/* Element not only child */

div p:last-child:not(:only-child) { 
	font-weight: bolder; 
}

#css #selector #attribute

diverse attribute selectors

/* Select all <a> that are hrefs: */
a[href]{}

/* Select all elements that have a class (useful if JS is adding classes somewhere) */
article[class]{}

/* Select an ID, but with the specificity of a class:  */
section[id="sideBar"]{color: red}

/* Style all links that are fully qualified URLs, knowing that ^ means "starts with": */
a[href^="http"]{}

/* Need to style a link to a ZIP or a PDF? Totally fine, too. Use the $ which means "ends with" */
a[href$=".zip"]:after{content:"(zip)"}

/* Style an image based on one word existing in the alt attribute? Let's use the space substring selector: */
img[alt~="Insurance"]{}

/* Style an image based on the name of the image file itself? Also doable, even if you're image is this-image-shot-april-2-2014.png. The | is a hyphen substring selector: */
img[src|="-april-"]{}

#css #selector

Class Name Contains ...

div[class*="test"] {
    background: #000;
}

#selector #jqueryselector #selectelements

jQuery Selectors

$("*")	                Selects all elements
$(this)	                Selects the current HTML element
$("p.intro")	        Selects all <p> elements with class="intro"
$("p:first")	        Selects the first <p> element	Try it
$("ul li:first")	Selects the first <li> element of the first <ul>
$("ul li:first-child")	Selects the first <li> element of every <ul>
$("[href]")	        Selects all elements with an href attribute
$("a[target='_blank']")	Selects all <a> elements with a target attribute value equal to "_blank"	Try it
$("a[target!='_blank']")	Selects all <a> elements with a target attribute value NOT equal to "_blank"	Try it
$(":button")	Selects all <button> elements and <input> elements of type="button"	Try it
$("tr:even")	Selects all even <tr> elements	Try it
$("tr:odd")	Selects all odd <tr> elements

#jquery #selector #jqueryselector #documentready function #documentready #document.ready #jqueryonclick

jQuery Selectors for buttons

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

css variables

select link with no<a>-text

variou spseudo element selectors

pseudo-element "has"

Only Child Selector

not-selector

not pseudo class

Not last child

list with not selector

hide empty elements

Check attribute value

Sibling Selector

General sibling selector

General Sibling Combinator

First or last element

Element not only child

diverse attribute selectors

Class Name Contains ...

jQuery Selectors

jQuery Selectors for buttons

Save snippets that work with our extensions