{"id":729,"date":"2017-03-18T12:04:12","date_gmt":"2017-03-18T06:34:12","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=729"},"modified":"2018-10-30T12:55:33","modified_gmt":"2018-10-30T07:25:33","slug":"previous-sibling-css-selector","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/previous-sibling-css-selector\/","title":{"rendered":"Is there a \u201cprevious sibling\u201d CSS selector"},"content":{"rendered":"<h2 id=\"explaining-about-css-selector\"><span style=\"color: #800000;\"><strong>Explaining about CSS Selector<\/strong><\/span><\/h2>\n<p><strong><span style=\"color: #003366;\">Cascading Style Sheets:<\/span>\u00a0<\/strong>A\u00a0<a href=\"https:\/\/www.wikitechy.com\/step-by-step-tutorials\/css-tutorials\/css-attribute-pipe-selector\" target=\"_blank\" rel=\"noopener\">CSS selector<\/a>\u00a0is the part of a\u00a0<strong>CSS\u00a0rule set<\/strong> that actually selects the content you want to <strong>style.<\/strong><\/p>\n<p><span style=\"color: #003366;\"><strong>CSS Syntax: <\/strong><\/span>A <a href=\"https:\/\/www.wikitechy.com\/css\/css-inline-stylesheet\" target=\"_blank\" rel=\"noopener\">CSS<\/a> rule-set consists of a <strong>selector<\/strong> and a <strong>declaration block<\/strong>:<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\" wp-image-733 aligncenter\" src=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/selector-2-300x63.png\" alt=\"\" width=\"381\" height=\"80\" srcset=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/selector-2-300x63.png 300w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/selector-2.png 569w\" sizes=\"(max-width: 381px) 100vw, 381px\" \/><\/p>\n<h3 id=\"explaining-about-css-selector-2\"><span style=\"color: #003366;\"><strong>Explaining about CSS Selector<\/strong><\/span><\/h3>\n<ul>\n<li>The <strong>selector<\/strong> points to the <a href=\"https:\/\/www.wikitechy.com\/html\/how-to-put-background-image-in-html\" target=\"_blank\" rel=\"noopener\">HTML<\/a> element you want to style.<\/li>\n<li>The <strong>declaration block<\/strong> contains one or more declarations separated by semicolons.<\/li>\n<li>Each declaration includes a <a href=\"https:\/\/www.wikitechy.com\/css\/css-element-selector\" target=\"_blank\" rel=\"noopener\">CSS property<\/a> <strong>name<\/strong> and <strong>a value<\/strong>, separated by a colon.<\/li>\n<li>A CSS declaration always ends with a <strong>semicolon<\/strong>, and declaration blocks are surrounded by <strong>curly braces.<\/strong><\/li>\n<li>In the following example all <strong>&lt;p&gt;<\/strong>elements will be center-aligned, with a red text color<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">{<br\/>    color: red;<br\/>    text-align: center;<br\/>}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<h3 id=\"previous-sibling-in-css-selector\"><span style=\"color: #800080;\"><strong>&#8220;previous sibling&#8221; in CSS selector<\/strong><\/span><\/h3>\n<ul>\n<li><strong>Cascading Style Sheets :<\/strong> A cascade is like a waterfall, there&#8217;s no backward motion. So, naturally, there is <strong>no previous sibling<\/strong> selector in CSS.<\/li>\n<li>However by using <strong>flexbox<\/strong>, a previous sibling selector can be simulated.<\/li>\n<li>The flex order property can <strong>move<\/strong> elements around the screen.<\/li>\n<li>The element A to turn red when element B is <a href=\"https:\/\/www.wikitechy.com\/css\/css-a-hover\" target=\"_blank\" rel=\"noopener\">hovered<\/a>.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;ul&gt;<br\/>    &lt;li&gt;A&lt;\/li&gt;<br\/>    &lt;li&gt;B&lt;\/li&gt;<br\/>&lt;\/ul&gt;<\/code><\/pre> <\/div>\n<h3 id=\"steps\"><span style=\"color: #3366ff;\"><strong>STEPS :<\/strong><\/span><\/h3>\n<p><span style=\"color: #800080;\"><strong>Step 1:<\/strong><\/span> Make the ul a<strong> flex container<\/strong>.<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">ul <br\/>{ display: flex; <br\/>}<\/code><\/pre> <\/div>\n<p><span style=\"color: #800080;\"><strong>Step 2:<\/strong> <\/span><strong>Reverse<\/strong> the order of siblings in the mark-up.<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;ul&gt;<br\/>   &lt;li&gt;B&lt;\/li&gt;<br\/>   &lt;li&gt;A&lt;\/li&gt;<br\/>&lt;\/ul&gt;<\/code><\/pre> <\/div>\n<p><span style=\"color: #800080;\"><strong>Step 3:<\/strong><\/span> Use a <strong>sibling selector<\/strong> to target Element A (<strong>~ or +<\/strong> will do) .<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">li:hover + li <br\/>{ <br\/>background-color: red; <br\/>}<\/code><\/pre> <\/div>\n<p><span style=\"color: #800080;\"><strong>Step 4:<\/strong><\/span> Use the <strong>flex order property<\/strong> to restore the order of siblings on the <a href=\"https:\/\/www.wikitechy.com\/css\/css-display\" target=\"_blank\" rel=\"noopener\">visual display<\/a>.<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">li:last-child <br\/>{ <br\/>order: -1; <br\/>}<\/code><\/pre> <\/div>\n<h3 id=\"two-outdated-beliefs-about-css\"><span style=\"color: #003300;\"><strong>Two Outdated Beliefs about CSS<\/strong><\/span><\/h3>\n<ul>\n<li>Flexbox is shattering<strong> long-held beliefs<\/strong> about CSS.<\/li>\n<li>A previous sibling selector is <strong>not possible<\/strong> in CSS<\/li>\n<li>If you know the exact position an :<strong>nth-child()<\/strong>-based exclusion of all following siblings would work.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">ul li:not(:nth-child(n+3))<\/code><\/pre> <\/div>\n<ul>\n<li>You can also select the <strong>nth-child right-to-left<\/strong>:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">ul li:nth-child(-n+2)<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<h3 id=\"previous-sibling-the-missing-css-selector\"><span style=\"color: #333399;\"><strong>Previous sibling, the missing CSS selector<\/strong><\/span><\/h3>\n<ul>\n<li>A way to style all previous siblings <strong>(opposite of\u00a0~)<\/strong> that may work depending on what you need.<\/li>\n<li>Let&#8217;s say you have a list of links and when hovering on one, all the previous ones should turn red. You can do it like this:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">\/* default link color is blue *\/ <br\/>.parent a { color: blue; } <br\/>\/* prev siblings should be red *\/ <br\/>.parent:hover a { color: red; }<br\/> .parent a:hover,<br\/> .parent a:hover ~ a { color: blue; }<br\/><br\/>&lt;div class=&quot;parent&quot;&gt; &lt;a href=&quot;#&quot;&gt;link&lt;\/a&gt; <br\/>&lt;a href=&quot;#&quot;&gt;link&lt;\/a&gt; &lt;a href=&quot;#&quot;&gt;link&lt;\/a&gt; &lt;a href=&quot;#&quot;&gt;link&lt;\/a&gt; &lt;a href=&quot;#&quot;&gt;link&lt;\/a&gt; &lt;\/div&gt; <\/code><\/pre> <\/div>\n<h3 id=\"syntax-idea\"><span style=\"color: #339966;\"><b>Syntax idea :<\/b><\/span><\/h3>\n<ul>\n<li>Since\u00a0<strong>parent element &gt; child element<\/strong>\u00a0is used to select child elements with a specified parent and\u00a0preceding element(s)<strong> ~ element<\/strong>\u00a0is used to select elements that are preceded by a specified element.<\/li>\n<li>Using\u00a0<strong>element &lt; previous element\u00a0<\/strong>would be a bad format as because of the\u00a0<strong>&gt;\u00a0<\/strong>use it could be confused with referring to the parent element.<\/li>\n<li>The format would be\u00a0element &#8211; previous element\u00a0as it doesn&#8217;t seem to be in use and relates to use of the\u00a0<strong>+\u00a0symbol<\/strong> for &#8220;next&#8221;.<\/li>\n<\/ul>\n<ul>\n<li>CSS 2.1 has some really handy selectors, one of which is the\u00a0adjacent (next) sibling selector\u00a0which has the form:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">el1 + el2<br\/>{<br\/>color:#f0f;<br\/>}<\/code><\/pre> <\/div>\n<ul>\n<li>The above would apply a tasty pink(ish) text colour to el2 where it directly follows el1 in HTML element order.<\/li>\n<li>The glaring omission (as far as i can see) in the CSS selectors currently available though is the exact opposite selector, previous-sibling which might perhaps have syntax:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">el1 - el2<br\/>{<br\/>color:#f0f;<br\/>}<\/code><\/pre> <\/div>\n<ul>\n<li>The obvious way to style el2 where it occurs directly before el1 with that same delightful pink(ish) text colour.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">label - input[type=&quot;checkbox&quot;]<br\/>{<br\/>order:-1;<br\/>}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<h3 id=\"html-source\"><span style=\"color: #808000;\"><b>HTML source:<\/b><\/span><\/h3>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div&gt;<br\/>&lt;label for=&quot;a&quot;&gt;<br\/>Label text<br\/>&lt;\/label&gt;<br\/>&lt;input type=&quot;checkbox&quot; name=&quot;a&quot; id=&quot;a&quot;&gt;<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\n<ul>\n<li>There is also currently a non-direct sibling selector which uses a <em><strong>tilde<\/strong><\/em> in place of the plus, the opposite of this could perhaps be:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">el1 -~ el2<br\/>{<br\/>color:#f0f;<br\/>}<\/code><\/pre> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Explaining about CSS Selector Cascading Style Sheets:\u00a0A\u00a0CSS selector\u00a0is the part of a\u00a0CSS\u00a0rule set that actually selects the content you want to style. CSS Syntax: A CSS rule-set consists of a selector and a declaration block: &nbsp; Explaining about CSS Selector The selector points to the HTML element you want to style. The declaration block contains [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[1297,1295,1302,1304,1305,1300,1301,1307,1303,1290,1291,1293,1308,1292,1306,1296,1299,1298,1271,1294],"class_list":["post-729","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-prev","tag-add-selector-for-previous-element-selector-for-previous-child","tag-css-all-siblings","tag-css-general-sibling-selector","tag-css-has-selector","tag-css-next-sibling-selector","tag-css-previous","tag-css-previous-selector","tag-css-sibling-selector-w3schools","tag-css3-select-the-preceding-sibling-of-an-element-in-css-using-selectors","tag-html-css-select-previous-sibling","tag-previous-sibling","tag-previous-sibling-jquery","tag-previous-sibling-selector","tag-previous-sibling-xpath","tag-re-css3-selectors-no-way-to-select-preceding-sibling-element","tag-sass-previous-sibling","tag-select-previous-sibling-css","tag-tagscss-css-selectors","tag-the-missing-css-selector"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=729"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/729\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}