apply the :focus on child element when parent selected css3 - html

Question

I have a label and drop down list behind it
it goes something like this :
<div class="=row dropdown" id="conTypeSelect" >
<label id="connectTypeLabel" class="label">Connector Type</label>
<select id="connecType" name="connecType" class="dropdownList" >
<option>type1</option>
<option>type2</option>
</select>
</div>
I want it so when clicking on the element to make the label change color to blue.
I know how to do it through a script by trigger off event on select and add css to the label to set it blue.
However I am wondering if there is a way to do it simply through css. Using script seem to make my code alot more messy for things like this.
So I thought of adding css to the parent and make it
.dropdown:focus {
color: #1A98C6;
}
.label:focus {
color: #1A98C6;
}
.dropdownList:focus {
border-bottom: solid 1px #1A98C6;
border-right: solid 1px #1A98C6;
outline: none;
}
however applying this to parent div doesn't seem to apply to child.
is there a way to make it so when I focus the parent the child would get focused too with css?
I have attempted to use this as the css but it doesn't seem to work:
.dropdown:focus .label {
color: #1A98C6;
}
.dropdown:focus .dropdownList {
border-bottom: solid 1px #1A98C6;
border-right: solid 1px #1A98C6;
outline: none;
}

Answer 1

You can achieve this by a + selector and putting the label after the select, so that you can do something like
.dropdown select:focus + label to select the label after the focused select box.
And use float:left on the label and a bit of right margin to pull the lable to the left of the select box.
.dropdown>select+label {
float: left;
margin-right: 10px;
}
.dropdown>select:focus+label {
color: #1A98C6;
float: left;
margin-right: 10px;
}
.dropdown>select:focus {
border-bottom: solid 1px #1A98C6;
border-right: solid 1px #1A98C6;
outline: none;
background: blue;
color: white;
}
<div class="=row dropdown" id="conTypeSelect">
<select id="connecType" name="connecType" class="dropdownList">
<option>type1</option>
<option>type2</option>
</select>
<label id="connectTypeLabel" class="label">Connector Type</label>
</div>
NOTE: I just added a background and color on select too just to show it effects the select too when focused.

Answer 2

This is the only way I can think of using CSS only to trigger by clicking the <input type="checkbox">.
body {
font-family: Arial;
font-size: 13px;
}
input[type=checkbox]{
display: none;
}
ul{
display: none;
border: 1px solid #ccc;
border-radius: 3px;
padding: 0;
width: 100px;
}
ul li {
border-bottom: 1px solid #eee;
cursor: pointer;
line-height: 30px;
list-style: none;
text-align: center;
}
ul li:hover {
background-color: #333;
color: #fff;
}
input[type=checkbox]:checked ~ ul {
display: block
}
<div class="dropdown" id="conTypeSelect">
<input type="checkbox" id="checkbox_toggle">
<label for="checkbox_toggle">Click to choose Connector Type</label>
<ul>
<li>type1</li>
<li>type2</li>
</ul>
</div>