Engineering and technology notes

CSS Selectors Reference

Jovan Stosic April 9, 2020

CSS Selectors

In CSS, selectors are patterns used to select the element(s) you want to style.

Use our CSS Selector Tester to demonstrate the different selectors.

Selector Example Example description
.class .intro Selects all elements with class=”intro”
.class1.class2 .name1.name2 Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant of an element with name1
#id #firstname Selects the element with id=”firstname”
* * Selects all elements
element p Selects all <p> elements
element.class p.intro Selects all <p> elements with class=”intro”
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects all <p> elements that are placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target=”_blank”
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word “flower”
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with “en”
[attribute^=value] a[href^=”https”] Selects every <a> element whose href attribute value begins with “https”
[attribute$=value] a[href$=”.pdf”] Selects every <a> element whose href attribute value ends with “.pdf”
[attribute*=value] a[href*=”w3schools”] Selects every <a> element whose href attribute value contains the substring “w3schools”
:active a:active Selects the active link
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
:checked input:checked Selects every checked <input> element
:default input:default Selects the default <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children (including text nodes)
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> element that is the first child of its parent
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the input element which has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:indeterminate input:indeterminate Selects input elements that are in an indeterminate state
:invalid input:invalid Selects all input elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to “it” (Italian)
:last-child p:last-child Selects every <p> element that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects input elements with no “required” attribute
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
::placeholder input::placeholder Selects input elements with the “placeholder” attribute specified
:read-only input:read-only Selects input elements with the “readonly” attribute specified
:read-write input:read-write Selects input elements with the “readonly” attribute NOT specified
:required input:required Selects input elements with the “required” attribute specified
:root :root Selects the document’s root element
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all input elements with a valid value
:visited a:visited Selects all visited links

Source: CSS Selectors Reference

Transmission Apache proxy setup

Jovan Stosic April 6, 2020

First enable the proxy modules in Apache:

sudo a2enmod proxy
sudo a2enmod proxy_http
sudo /etc/init.d/apache2 restart

Then you will have to edit /etc/apache2/mods-available/proxy.conf file. But before that backup your proxy.conf file:

cd /etc/apache2/mods-available
sudo mv proxy.conf proxy.conf.default

Now create a new file called proxy.conf using your favorite text editor and add the following lines to it:

<ifmodule mod_proxy.c>
  #turning ProxyRequests on and allowing proxying from all may allow
  #spammers to use your proxy to send email.

  ProxyRequests Off
  <proxy *>
    AddDefaultCharset off
    Order Allow,Deny
    Allow from all
  </proxy>

  ProxyPass /transmission http://localhost:9091/transmission
  ProxyPassReverse /transmission http://localhost:9091/transmission
  # Line below is optional
  Redirect permanent /transmission https://myserver.com/transmission/web/

  # Enable/disable the handling of HTTP/1.1 "Via:" headers.
  # ("Full" adds the server version; "Block" removes all outgoing Via: headers)
  # Set to one of: Off | On | Full | Block

  ProxyVia On
</ifmodule>

Source: Transmission Apache proxy setup

NextCloud won’t load any mixed content – support – Nextcloud community

Jovan Stosic April 5, 2020

Hi, I’m the author and also a proxy user like yourself. That guide doesn’t cover use behind a proxy, so here’s what you need to ensure is in your config.php file:

'overwrite.cli.url' => 'https://cloud.myserver.com',
'overwriteprotocol' => 'https',

This forces NC to use HTTPS despite not being configured that way.

What you’re experiencing there is totally normal behaviour as you’re proxying from an SSL connection to plain HTTP. Nextcloud will as such respond in plain HTTP unless you tell it otherwise.

Be aware, if you access internally via IP over HTTP, this will either a) give you SSL errors or b) not work at all (443 is not configured by default, so it may refuse to connect when it forces, due to that setting, the connection from http:// to https://)

Source: NextCloud won’t load any mixed content – support – Nextcloud community

Vue vs. React in 2019: Which Framework to Choose and When

Jovan Stosic April 5, 2020

Vue and React are two frontend JavaScript frameworks popular in the developer world, with React taking the top spot on the podium for three consecutive years now. Both tools offer developers a productive approach to building various Web products, but each has its own best use cases and responds to different business needs. In this article, we’ll explore what those use cases can be, along with perks that make Vue.js and React unique.

Source: Vue vs. React in 2019: Which Framework to Choose and When